CODEWITHSUNDEEP
htmlcsstoggleaccordion
user3713890
user3713890

Reputation: 13

Html set default toggle

I open and close toggle if i click to href=#collapseFive

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapseFive">    
    <strong><i class="icon-caret-down"></i>SomeText</strong>
 </a>
 <div id="collapseFive"  class="panel-collapse collapse">

I want to set default toggle "open" for div id="collapseFive" class="panel-collapse collapse"

So how can do this without javascript ?

Upvotes: 0

Views: 2570

Answers (2)

Amit Kansal
Amit Kansal

Reputation: 227

I am not giving you complete solution but you can try this way.. please open this fiddle:

<label for="menu-toggle">Click me to toggle menu</label>  
<input type="checkbox" id="menu-toggle"/>  
<ul id="menu">  
  <li><a href="#">First link</a></li>
  <li><a href="#">Second link</a></li>
  <li><a href="#">Third link</a></li>
</ul>

css

label {  
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

JsFiddle

Upvotes: 0

larrydalmeida
larrydalmeida

Reputation: 1620

I'm afraid you can't set the data-* attributes using only CSS. That requires attribute values (other that "style") to be changed and that's where JavaScript comes in.

You can check out this JSFiddle where an accordion has been created only with CSS:

http://jsbin.com/UnEwelO/1/edit

You might also find this article interesting:

http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

Upvotes: 0

Related Questions