CODEWITHSUNDEEP
jquerycssmedia-queriesjsfiddle
user3438917
user3438917

Reputation: 497

Toggle one div at a time in mobile view

I have a footer that displays as an accordion menu on mobile devices only. Therefore, the ul elements must be hidden on load only on mobile devices. Only one of the sections should open at a time, and if there is one already open, it will close when another is triggered (like this: http://jsfiddle.net/auUxk/). I have the code below, but it is currently triggering the divs globally.

<div class="col-md-3 col-sm-4">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">About us</h4>
        </div>
        <ul>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
        </ul>
    </div>
</div>
<div class="col-md-3 col-sm-4">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">Header</h4>
        </div>
        <ul>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
            <li><a href="">Link</a>
            </li>
        </ul>
    </div>
</div>

MEDIA QUERY

@media screen and (max-device-width: 480px) {
  ul li{
    display:none;
  }
}

jQuery

$(document).ready(function($) {
    $(".panel-title").click(function() {
        $("li").slideToggle(500); 
    });
});

JSFIDDLE:http://jsfiddle.net/auUxk/1115/

Upvotes: 0

Views: 496

Answers (1)

nlfonseca
nlfonseca

Reputation: 440

Why you don't use only css? With radio buttons with the same name will work.

JSFIDDLE: http://jsfiddle.net/0Ldpk0vy

Updated (with animation) JSFIDDLE: http://jsfiddle.net/0Ldpk0vy/1/

ul {
  display: none;
}

[type="radio"] {
  display: none;
}

[type="radio"]:checked + ul {
  display: block;
}

Upvotes: 3

Related Questions