Toggle section visibility based on data-attributes and class

Question

I have a menu which will be used to toggle different sections of the page. Each list item in the menu has a data-attribute. This data-attribute matches with the class of the section i would like to toggle.

How can I match the data-attribute of the active menu item with the class of the section I would like to toggle in the main content?

Any help appreciated!

Codepen link

Markup:

App Menu

<ul class="tablet--nav__Parent">
<li data-name="js-classifieds--description" class="active">
  <i class="icon-description"></i>
  <a href="#">Description</a></li>
<li data-name="js-classifieds-specification" class="">
  <i class="icon-specification"></i>
  <a href="#">Specification</a>
</li>
<li data-name="js-classifieds-reviews" class="">
  <i class="icon-userreviews"></i>
  <a href="#">User Reviews</a></li>
<li data-name="classifieds--valuation" class="">
  <i class="icon-roadtests"></i>
  <a href="#">Road Tests &amp; Reviews</a>
</li>

Main Content

<main class="main-content" role="main-content">
  <div class="js-classifieds--description active">
    <section class="advert-description">
      <p>Asteroid Grey</p>
    </section>
  </div>
  <div class="js-classifieds-specification">
    <div>
      <p>Room Beige</p>
    </div>

  </div>
  <div class="js-classifieds-reviews">
    <div>
      <p>Random Review</p>
    </div>
  </div>

I can toggle the active class on the menu and based of off that class, I would like to show my relevant section. I would then check if the data attribute of the active menu item matches the class of the item I would like to toggle and this is the bit that I am struggling with. I have the follwing JS

    var toggleStates = function() {
  //Find all li[s] in .tablet--nav
  var $tabletnavLi = $(".tablet--nav__Parent").find("li");
  //Loop through them and take car of active class on current item
  $($tabletnavLi).each(function() {
    var $self = $(this);
    $self.click(function() {
      //Add active class to active tab
      $self.addClass("active");
      var activeElement = ($(".active").data().name);
      //Remove from siblings - other elements on page
      $self.siblings().removeClass("active");
    });
  });
};

Ideally I would be able to do something like:

$('.main-content > div').find(activeElement).addClass('active
section').siblings().removeClass('active-section');

Unfortunately, this does not work.

Norlihazmey Ghazali · Accepted Answer · 2015-09-11 07:42:46Z

1

I did't see where you call toggleStates function. Well this below code should do the trick, try it out :

// hide for all section
$('.main-content > div').removeClass('active').hide();
// current click on a tag
$('.tablet--nav__Parent a').click(function () { 
  // remove class for all li element
  $('.tablet--nav__Parent li').removeClass('active');
  // cache parent element
  var current = $(this).closest('li');
  // get data attributes values from li element
  var dataName = current.data('name');
  // add active class to currenct click li element
  current.addClass('active');
  // remove class active from all section , and hide them
  $('.main-content > div').removeClass('active').hide();
  // add class to MATCHED section and show it
  $('.'+dataName).addClass('active').show();        
});

i hide all the sections for initial state, demo purposed. You can change it for what section should displayed first.

DEMO

edited Sep 11, 2015 at 7:42

answered Sep 11, 2015 at 7:35

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antonio Vasilev Over a year ago

Yes, perfect! That works like a charm. Thank you very much!

Collectives™ on Stack Overflow

Toggle section visibility based on data-attributes and class

Markup:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Markup:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related