CODEWITHSUNDEEP
javascriptjquerycss
Federico
Federico

Reputation: 1422

Toggle multiple classes

I'm stuck with a menu I'd love to add to my website. I have branched my work in:

  1. Commercial
  2. Fashion
  3. Music
  4. Portrait

So I have a menu like this one above. When I click on one section, let's say "Commercial" I want all the others to be display:none.

Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/

$(document).ready(function() {
    $("#commercial").click(function() {
        $(".commercial").toggleClass("show");
        $(".fashion").toggleClass("hid");
        $(".music").toggleClass("hid");
        $(".portrait").toggleClass("hid");
    });
});

Upvotes: 1

Views: 1781

Answers (4)

Andrew Hewitt
Andrew Hewitt

Reputation: 331

Have a look at this fiddle, think it's what you want

Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.

$(function(){
    // find all the links that you can click
    $("div.clickable a").click(function(e) {
        // when they're clicked, find the identifier of 
        // the tab/div you want shown
        var clickedId = $(e.target).parent("div").attr("id");
                
        // traverse all of the divs and show/hide according 
        // to whether it's the tab you want
        $("div.section").each(function(index, div) {
            $(div).toggle($(div).hasClass(clickedId));
        });
    });
});

And the HTML:

<div id="commercial" class="clickable"><a href="#">Commercial</a></div>
<div id="fashion" class="clickable"><a href="#">Fashion</a></div>
<div id="music" class="clickable"><a href="#">Music</a></div>
<div id="portrait" class="clickable"><a href="#">Portrait</a></div>
<br />

<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div> 
<div class="portrait section">P</div>

HTH

Edited to add an "ALL" link in this fiddle

$("div.clickable a").click(function(e) {
    // when they're clicked, find the identifier of 
    // the tab/div you want shown
    var clickedId = $(e.target).parent("div").attr("id");
                
    // traverse all of the divs and show/hide according 
    // to whether it's the tab you want
    $("div.section").each(function(index, div) {
        $(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
    });
});

After adding this to the list of clickable divs:

<div id="ALL" class="clickable">
    <a href="#">ALL</a>
</div>

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You need siblings() width jquery

Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$("[id]").click(function(){ //onclick on element with ID
    var selected = $(this).attr("id"); // save the value of that ID
    $("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial"><a href="#">Commercial</a></div>
<div id="fashion"><a href="#">Fashion</a></div>
<div id="music"><a href="#">Music</a></div> 
<div id="portrait"><a href="#">Portrait</a></div><br />

<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>

BUT a better approach would be to use data-*

$("[data-tab]").click(function(){
  var current = $(this).attr("data-tab");
  $("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div> 
<div data-tab="portrait"><a href="#">Portrait</a></div><br />

<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

AGAIN it is better to use pure javascript 

function runClick (event) {
    var current = this.getAttribute("data-tab");
    for( var content = 0; content < dataContent.length; content++) {
      dataContent[content].style.display = "none"
    }
    document.querySelector("[data-content="+ current + "]").style.display = "block"
}

var dataTabs    = document.querySelectorAll("div[data-tab]"),
    dataContent = document.querySelectorAll("div[data-content]");

for(var tab = 0; tab < dataTabs.length; tab++){
   dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial"><a href="#">Commercial</a></div>
<div data-tab="fashion"><a href="#">Fashion</a></div>
<div data-tab="music"><a href="#">Music</a></div> 
<div data-tab="portrait"><a href="#">Portrait</a></div><br />

<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

Upvotes: 2

Philipp Dahse
Philipp Dahse

Reputation: 748

Your could that more easy like:

<div class="link" id="commercial"><a href="#">Commercial</a></div>
<div class="link" id="fashion"><a href="#">Fashion</a></div>
<div class="link" id="music"><a href="#">Music</a></div>
<div class="link" id="portrait"><a href="#">Portrait</a></div><br />

<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".link").click(function(){
            var id = $(this).attr('id');
            $('.elem').hide();
            $('.' + id).show();
        });
    });

</script>

Upvotes: 0

Alex Art.
Alex Art.

Reputation: 8781

HTML:

<div id="commercial" class="menuItem"><a href="#">Commercial</a></div>
<div id="fashion" class="menuItem"><a href="#">Fashion</a></div>
<div id="music" class="menuItem"><a href="#">Music</a></div>
<div id="portrait" class="menuItem"><a href="#">Portrait</a></div><br />

<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>

JavaScript:

$(document).ready(function(){
    $(".menuItem").click(function(){
        var id = this.id;
        $('.content').removeClass('show').addClass('hid');
        $('.'+id).addClass('show').removeClass('hid');
    });
});

CSS:

.hid {
    display:none;
}
.show {
    display:block;
}

Fiddle

Upvotes: 1

Related Questions