jQuery - Toggle section visibility based on data-attributes and class by Norlihazmey Ghazali

jQuery - Toggle section visibility based on data-attributes and class by Norlihazmey Ghazali http://stackoverflow.com/questions/32517753/toggle-section-visibility-based-on-data-attributes-and-class/32518033?noredirect=1#comment52894270_32518033

HTML

<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>
</ul>
<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>
</main>

<ul class="tablet--nav__Parent">
    <li data-name="js-classifieds--descriptiona" class="active"> <i class="icon-description"></i>
 <a href="#">Description</a>

    </li>
    <li data-name="js-classifieds-specificationa" class=""> <i class="icon-specification"></i>
 <a href="#">Specification</a>

    </li>
    <li data-name="js-classifieds-reviewsa" class=""> <i class="icon-userreviews"></i>
 <a href="#">User Reviews</a>

    </li>
    <li data-name="classifieds--valuationa" class=""> <i class="icon-roadtests"></i>
 <a href="#">Road Tests &amp; Reviews</a>

    </li>
</ul>
<main class="main-content" role="main-content">
    <div class="js-classifieds--descriptiona active">
        <section class="advert-description">
            <p>Asteroid Grey</p>
        </section>
    </div>
    <div class="js-classifieds-specificationa">
        <div>
            <p>Room Beige</p>
        </div>
    </div>
    <div class="js-classifieds-reviewsa">
        <div>
        ...

CSS

.active{
    display : block;
}

JavaScript

// 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();        
});