show/hide div with id based on data attribute (onclick)

Question

I have the following List:

<ul>
    <li><a href="" class="active" data-related="main">Main</a></li>
    <li><a href="" data-related="title_1">Title 1</a></li>
    <li><a href="" data-related="title_2">Title 2</a></li>
    <li><a href="" data-related="title_3">Title 3</a></li>
    <li><a href="" data-related="title_4">Title 4</a></li>
</ul>

And the following div structure:

<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

At the beginning all div's are visible. (Because of Google and for User without JS)

If the page is loaded, all except the main div should be hidden. If I'm clicking on the navigation point with the data attribute "title_1" the related div should be visible and the main div should be hidden also. Also the class active should jump to the new active navigation point. :)

Is that possible? I don't know how to get the solution for this problem.

Thanks for your help!

Answer 1

You can use on click event on a elements inside ul li and get the attribute data-related . Then you can use this and find div with id same as data-related and toggle(hide/show or anything else):

 $("ul li a").on("click", function() { $("div[id=" + $(this).attr("data-related") + "]").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#" class="active" data-related="main">Main</a> </li> <li><a href="#" data-related="title_1">Title 1</a> </li> <li><a href="#" data-related="title_2">Title 2</a> </li> <li><a href="#" data-related="title_3">Title 3</a> </li> <li><a href="#" data-related="title_4">Title 4</a> </li> </ul> <div id="main">... Content ...</div> <div id="title_1">... Content ...</div> <div id="title_2">... Content ...</div> <div id="title_3">... Content ...</div> <div id="title_4">... Content ...</div> 

Another example with addClass/removeClass:

 $("ul li a").on("click", function() { $("div").removeClass("activeLnk"); $("div[id=" + $(this).attr("data-related") + "]").addClass("activeLnk"); }); 

 .activeLnk { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#" class="active" data-related="main">Main</a> </li> <li><a href="#" data-related="title_1">Title 1</a> </li> <li><a href="#" data-related="title_2">Title 2</a> </li> <li><a href="#" data-related="title_3">Title 3</a> </li> <li><a href="#" data-related="title_4">Title 4</a> </li> </ul> <div id="main">... Content ...</div> <div id="title_1">... Content ...</div> <div id="title_2">... Content ...</div> <div id="title_3">... Content ...</div> <div id="title_4">... Content ...</div> 

Answer 2

you could match the ID with the data-attr like this:

$("div").each(function(){
     $(this).hide();
    if($(this).attr('id') == 'main') {
        $(this).show();
    }
});

$('a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});

http://jsfiddle.net/mcko06ht/

Answer 3

Add a class to this html code :

<div id="main" class="tab">... Content ...</div>
<div id="title_1" class="tab">... Content ...</div>
<div id="title_2" class="tab">... Content ...</div>
<div id="title_3" class="tab">... Content ...</div>
<div id="title_4" class="tab">... Content ...</div>

Put this in a script tag :

$('ul a').click(function(e){
            $('ul li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
           //This is also valid
           //$('#'+$(this).data('related')).show();
            e.preventDefault();
});