# Using same module

**URL:** <https://community.hubspot.com/t/using-same-module/47171>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [November 18, 2021, 11:01am UTC](https://community.hubspot.com/t/using-same-module/47171 "2021-11-18T11:01:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DMaksimovic](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@DMaksimovic](https://community.hubspot.com/u/DMaksimovic)\
**Post date:** [November 18, 2021, 11:01am UTC](https://community.hubspot.com/t/using-same-module/47171/1 "2021-11-18T11:01:53Z")

</div>

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:

```lia-code-sample
<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:

```lia-code-sample
.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:

```lia-code-sample
<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:

```lia-code-sample
.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.

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [November 18, 2021, 2:05pm UTC](https://community.hubspot.com/t/using-same-module/47171/2 "2021-11-18T14:05:31Z")

</div>

Hey @DMaksimovic ,  
you need to give the same Id´s.

 ![Oezcan_1-1637244271973.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/d/dd987de06b5da9b1dd24265422868e75f62e036b.png)

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

---

<div class="post-metadata">

**Author:** ![DMaksimovic](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@DMaksimovic](https://community.hubspot.com/u/DMaksimovic)\
**Post date:** [November 18, 2021, 3:55pm UTC](https://community.hubspot.com/t/using-same-module/47171/3 "2021-11-18T15:55:02Z")

</div>

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