Hi,
I have a problem with modules, i’m trying to make a dropdown button, and when i use it multiple times only one of them works, so i tried creating clones of module, and changing all classes and id names but the problem remains.
I don’t understand why it doesn’t work, because i’m using different modules, and nothing connects them.
Here is the code:
First module:
HTML:
<nav class = "footer_nav_1">
<label for="touch"><span class = "footer_klasa_span_1">{{ module.naziv_field }}</span></label>
<input type="checkbox" id="touch">
<ul class="slide_1">
{% for item in module.field_group %}
<li class = "li_klasa"><a href="{{ item.element_link_field }}">{{ item.element_field }}</a></li>
{% endfor %}
</ul>
</nav>
CSS:
.li_klasa a {
text-decoration : none;
color : #2d2f31;
font-family: 'Campton';
text-align: center;
}
.footer_nav_1 {
width : 300px;
background: #d9d9d9;
/* margin : 40px auto; */
}
.footer_klasa_span_1 {
padding : 30px;
background : #2d2f31;
color : white;
font-size : 1.2em;
font-variant : small-caps;
cursor : pointer;
display: block;
}
.footer_klasa_span_1::after {
float: right;
right: 10%;
content: "+";
}
.slide_1 {
clear:both;
width:100%;
height:0px;
overflow: hidden;
text-align: center !important;
transition: height .4s ease;
}
.slide_1 .li_klasa {
padding : 30px;
list-style: none;
text-align: center !important;
}
#touch {position: absolute; opacity: 0; height: 0px;}
#touch:checked + .slide_1 {height: auto;}
Second module:
HTML:
<nav class = "footer_nav_2">
<label for="touch"><span class = "footer_klasa_span_2">{{ module.naziv_field }}</span></label>
<input type="checkbox" id="touch_2">
<ul class="slide_2">
{% for item_1 in module.field_group %}
<li class = "li_klasa_2"><a href="{{ item_1.element_link_field }}">{{ item_1.element_field }}</a></li>
{% endfor %}
</ul>
</nav>
CSS:
.li_klasa_2 a {
text-decoration : none;
color : #2d2f31;
font-family: 'Campton'
}
.footer_nav_2 {
width : 300px;
background: #d9d9d9;
/* margin : 40px auto; */
}
.footer_klasa_span_2 {
padding : 30px;
background : #2d2f31;
color : white;
font-size : 1.2em;
font-variant : small-caps;
cursor : pointer;
display: block;
}
.footer_klasa_span_2::after {
float: right;
right: 10%;
content: "+";
}
.slide_2 {
clear:both;
width:100%;
height:0px;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.slide_2 li_klasa_2 {padding : 30px;}
#touch_2 {position: absolute; opacity: 0; height: 0px;}
#touch_2:checked + .slide_2 {height: 300px;}
I’m looking forward to your solutions.
