david david - 3 months ago 10
Javascript Question

Click a class to show a li

I am trying to create a menu system the toggles/ shows (would be nice to fade or toggle) the contents of an element. So the user does not have to change page. normally would use ajax (.load) but dont want other files holding the text (due to cms).

Cant seem to get it to work:

https://jsfiddle.net/feto4ymt/7/

UPDATE

Still breaks primary menu system, but this secondary menu system nested in it does not break now:
https://jsfiddle.net/ph3ng2fo/35/

Before with to slide menu systems one nested in another:
https://jsfiddle.net/ph3ng2fo/34/

Before (each menu system in solo operation mode where they both work fine)
Main: http://jsfiddle.net/3to0neLm/1
Nested in the Main Li: http://jsfiddle.net/feto4ymt/1

Script

$(".tab_item2").click(function() {
$(".tab_item2").removeClass(".tab_item_color2");
$(this).addClass(".tab_item_color2");
$(".tabitem2").show(".slide_content2");
});

Answer

You can use .eq(), .index(), .hide()

$(".tab_item2").click(function() {
  $(".tab_item2").removeClass("tab_item_color2");
  $(this).addClass("tab_item_color2");
  // hide all `.tabslider2 li` elements,
  // select, show `.tabslider2 li` element at current `.tab_item2` index
  $(".tabslider2 li").hide().eq($(this).index(".tab_item2")).show();
});

https://jsfiddle.net/feto4ymt/14/