1

Using radio buttons to trigger hidden/shown accordion menu. Works in jsfiddle... Does not work in any other browser I've tried. I'm assuming its something small I've miss typed or am missing or I'm totally lost. I'm aware not everything works right in all browsers/setups/etc but from what I've read/understood this work?

EDIT: max-height does not work in jsfiddle either... So this must be the problem. Basically I want the ul to auto expand to the length of it's li list. So using a fixed height will not work. height: auto; as well as max-height; neither work..

Any and all help is appreciated it.

HTML

<section class="container">
<div>
    <input id="test1" name="acctest" type="radio" checked />
    <label for="test1">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>
<div>
    <input id="test2" name="acctest" type="radio" />
    <label for="test2">About us</label>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</div>

CSS

.container ul{
background: rgba(255, 255, 255, 0.5);
margin: 0px;
overflow: hidden;
height: 0px;
position: relative;
    margin: 0;
z-index: 1;
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;}
.container li{
    height: 25px;
    color: #000;
    font-size: 12px;}
.container input:checked ~ ul{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
    max-height: 50px;}

UPDATED jsfiddle link: http://jsfiddle.net/ETaXr/2/

Thanks again!

elementalsin
  • 35
  • 5

2 Answers2

0

So I found CSS transition auto height not working (click that title for the link)

props to Christofer Vilander for the answer and fiddle link.

I edited the fiddle over to radio buttons (the demo used checkboxes) and changed some of the class/id names... and it works... It seems I needed to define the UL more than I did.

http://jsfiddle.net/3WK9Y/11/

<div class="ac-container">
<div>

    <input id="ac-1" name="accordion-1" type="radio" checked/>
    <ul class="ac-small">
        <li>Some content</li>
    </ul>
    <label for="ac-1">About us</label>

</div>    

<div>    
    <input id="ac-2" name="accordion-1" type="radio" />
    <ul class="ac-small">
        <li>Some more content</li>
        <li>test</li>
    </ul>
    <label for="ac-2">About us</label>
</div>
</div>

see the fiddle for the css plz... its much longer and more detailed.

Community
  • 1
  • 1
elementalsin
  • 35
  • 5
0

I manage to put something together from bits and peaces from both Christofer and Elementalsin on the subject. See fiddle for a better understanding of the css3 involved. This modification works a lot better because the above example could only close an item after clicking a second one. Here you can toggle them. 

<div class="css3-acc">
<input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />

<label>
  <input class="inner" type="radio" name="ccs3-acc-grp" />
  <h3>Item 1</h3>
  <label for="css3-acc-def"></label>
  <ul>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
    <li><a href="#">Sub nav</a></li>
  </ul>
</label>   

</div>
Plippie
  • 2,836
  • 33
  • 28