Kage Kage - 2 months ago 7
ASP.NET (C#) Question

Collapsable list, doesnt respond to click

I am making a website, trying to get the following code to work.
Fun part is, here in the code snipp thing of Stackoverflow it works. but on my website it doesn't. Does anyone have any idea? Its exactly the same code webpage: http://s2nita.com/Applications/Application.aspx
When clicking on the blue bar its supposed to collapse and or show another item.



ul {
padding: 0;
}
div.emailblok {
width: 100%;
text-align: center;
display: block;
}
nav.emails {
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
border-radius: 20px;
display: inline-block;
width: 100%;
}
nav.emails > ul {
list-style-type: none;
}
nav.emails > ul > li {
display: block;
}
nav.emails > ul > li > label,
nav.emails > ul > li > a {
background-color: rgb(0, 0, 118);
background-image: -webkit-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: -moz-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: -o-linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
background-image: linear-gradient(135deg, rgb(30, 144, 255), rgb(0, 0, 118));
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(255, 255, 255);
display: block;
font-size: .7rem;
font-weight: 400;
height: 50px;
letter-spacing: .4rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.emails > ul > li > label + input {
display: none;
visibility: hidden;
}
nav.emails > ul > li > label:hover,
nav.emails > ul > li > a:hover {
background-color: rgb(1, 4, 122);
background-image: -webkit-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: -moz-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: -o-linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
background-image: linear-gradient(150deg, rgb(1, 4, 122), rgb(1, 4, 122));
cursor: pointer;
}
nav.emails > ul > li > label + input:checked + div {
max-height: 500px;
}
nav.emails > ul > li > div {
background-color: rgb(255, 255, 255);
max-height: 0;
overflow: hidden;
transition: all .5s linear;
}

<div class="emailblok">
<nav class="emails">
<ul>
<li runat="server">
<label for="Nummer0">Nummer 0</label>
<input type="radio" runat="server" name="Email" id="Nummer0" checked />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>
</li>
<li runat="server">
<label for="Nummer1">Nummer 1</label>
<input type="radio" runat="server" name="Email" id="Nummer1" />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>

</li>
<li runat="server">
<label for="Nummer2">nummer 2</label>
<input type="radio" runat="server" name="Email" id="Nummer2" />
<div>
Helemmoooie email
<br />
<br />
<br />
</div>
</li>
</ul>
</nav>
</div>




Answer

Match the for attribute of your label tag to the id of your radio button for each of the li and you will good to go.

Just as you did in your Question, i.e. why its working here in Stack Snippet.

As:

<li>
    <label for="MainContent_Nummer2">nummer 2</label>
    <input value="Nummer2" name="ctl00$MainContent$Email" type="radio" id="MainContent_Nummer2">
     <div>Helemmoooie email<br><br><br></div>
</li>
Comments