Display the specific div when Atag clicks. And hide other divs

advertisements

I'm faily new to jquery and coding in general. I'm having a few troubles with this.

What i want is for when the page loads, the 'Vlogging' link is active and 'Details 1' is shown. Then when you click on either 'Filmmaking' or 'Beme'... 'Details 2 or 3 is shown and which ever one was there goes away.

I have everything set up right so far just need to get it to where when you click on one of the other links the correct 'Details' text shows itself.

Thank you so much and i have it in a fiddle right now!

http://jsfiddle.net/t1huc43d/

Here is the code than needs tuned:

$(function() {
   $("togglediv1").click(function() {
      $("#togglediv1").removeClass("display-start");
      $("li").removeClass("display");
      $(this).addClass("display");
   });
});


This code will save you a lot of time. I added a custom attribute called "data". This attribute is used to tie the link to the tab you wish to display. This code will make it a lot easier to add additional tabs and etc. Look at the bottom for the changed HTML and JavaScript.

<div id="wrap">

<ul id="divtoggle">
    <li><a class="link" data="1">Vlogging</a></li>
    <li><a class="link" data="2"> Filmmaking</a></li>
    <li><a class="link" data="3"> Beme</a></li>
</ul>

<div class="text">
    <div class="tab" data="1">Details 1</div>
    <div class="tab" data="2">Details 2</div>
    <div class="tab" data="3">Details 3</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
  $(".link").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    dataAttr = $(this).attr("data");
    $(".tab").hide();
    $(".tab[data="+dataAttr+"]").show();
  });
  $(".link:first").click();
});
</script>