CODEWITHSUNDEEP
javascriptjqueryhtmlcss
emjay
emjay

Reputation: 1511

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

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!

Upvotes: 2

Views: 28483

Answers (3)

user2952238
user2952238

Reputation: 787

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/

Upvotes: 4

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 5

Sebastien B.
Sebastien B.

Reputation: 476

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

Upvotes: 2

Related Questions