JQuery Show Hide Multiple DIVs From Menu And Menu Within DIV

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

Solution 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

Solution 2:

You could do it like this:

$(document).ready(function() {
   $('div[class^=work-]').hide();
   var letters = ["A", "B", "C"]; //Put all posible letters here
   for(var i in letters){
      var letter = letters[i];
      $("."+letter).click(function() {
         $("div[class^=work-]").hide();
         $("div[class^=work-"+letter+"-link1]").fadeIn();
      });
   }
   $('[class^=link]').click(function() {
      $('div[class^=work-]').hide();
      $(this).parent().fadeIn(); //This does the trick!!
      return false;
   });
});

Hope this helps. Cheers