Question

I’m new to JQuery. I’m trying to show and hide multiple divs. I have a menu showing A,B,C. When I click A, the div A1 appears. Div A1 has a menu within it showing 1, 2, 3 and so on. When I click 2 in this menu, A1 disappears and A2 appears. When I click B, the currently visible div disappears and B1 appears. B1 has a menu showing 1, 2, 3. When you click 2, B1 is replaced by B2. And so on – I think you get the picture.

Here is my html:

<div class="thework"><a href="#" class="A">A</a> <a href="#" class="B">B</a> <a href="#" class="C">C</a></div>
<div class="work-A-link1">A1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link2">A2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-A-link3">A3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link1">B1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link2">B2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-B-link3">B3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link1">C1<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link2">C2<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>
<div class="work-C-link3">C3<br />
<a href="#" class="link1">1</a> <a href="#" class="link2">2</a> <a href="#" class="link3">3</a>
</div>

And here’s the code to go with it:

$(document).ready(function() {
$('div[class^=work-]').hide();
$(".A").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-A-link1]").fadeIn();
});
$(".B").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-B-link1]").fadeIn();
});
$(".C").click(function() {
    $("div[class^=work-]").hide();
    $("div[class^=work-C-link1]").fadeIn();
});
$('[class^=link]').click(function() {
    $('div[class^=work-]').hide();
    var $this = $(this);
    var x = $this.attr("className");
    $(".work-A-" + x).fadeIn();
    return false;
});
});

This code only works with the div “A”, and I’d have to number each div individually, which seems really inefficient. I’ve tried using split() to gather up the class names and target the respective divs, but I don’t have the coding skills. Is there an elegant solution to this?

Answer 1

I have a different way if you can split up the classes in your HTML?

e.g. the divs which are

<div class="work-A-link1">

can you change them to?

<div class="work A link1">

if so this appears to work.. will add a fiddle a bit later added fiddle

$('.work').hide();
   $(".thework a").click(function() {
      var letter = $(this).attr("class"); // link class is also in work class 
         $(".work").hide(); // hide all work class
         $(".work.link1."+letter).fadeIn(); //show the relevant work class
   });


   $('.work a').click(function() {
     var pLink = $(this).attr("class"); //gets the link# class
     var pLetter = $(this).parent().attr("class").split(' ')[1]; //gets the relevant letter if letter is 2nd class in array  index 1

     if ($(this).parent().hasClass(pLink)) {
        //do nothing
     } else {

     $(this).parent().hide();
     $("." + pLetter + "." + pLink).fadeIn(); // produces the .letter.link# CSS selector required
   }

   return false;
});

Working Example : Here