Using same module

[DMaksimovic]

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.

[Oezcan · Accepted solution]

Hey @DMaksimovic ,

you need to give the same Id´s.

Like:

<label for="touch_2">

<span class = "footer_klasa_span_1">{{ module.naziv_field }}</span>

</label>
<input type="checkbox" id="touch_2">

Best regards,

Özcan

[DMaksimovic]

Yes, that was the issue, thanks for quick response!