toggleClass on the same container and show different content with tabs effect


Tags: javascript,jquery,html,css,toggleclass

Problem :

I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.

Here is a live example http://jsbin.com/eyEnEvEC/1/

and the entire code.

CSS

.container {
  display:none;
}


.show {
  display:block;
}

HTML

<a href="" id="link1">Link 1</a>
<a href="" id="link2">Link 2</a> 
<div class="container"></div>

Javascript

$(function(){

  $('#link1').click(function(){    
    $('.container').html('Test 1');
    $('.container').toggleClass('show');
        return false;
  });

  $('#link2').click(function(){    
    $('.container').html('Test 2');
    $('.container').toggleClass('show');
        return false;
  });

});


Solution :

Try this

HTML

<a href="" id="link1" data-status="inactive">Link 1</a>
<a href="" id="link2" data-status="inactive">Link 2</a>

JQuery

$(function(){
  $.fn.toggleContent = function(ahtml) {
    var cstatus =  $(this).attr("data-status");
    $("a[id^=link]").attr("data-status","inactive");
    if(cstatus == "inactive") {
      $('.container').html(ahtml).show(); 
      $(this).attr("data-status","active");
    }
    else {
      $('.container').html(ahtml).hide();  
      $(this).attr("data-status","inactive");
    }
    return false;
  };

  $('#link1').click(function(){    
    $(this).toggleContent('Test 1');    

  });

  $('#link2').click(function(){    
    $(this).toggleContent('Test 2'); 
  });

});

Demo : http://jsbin.com/eyEnEvEC/9/edit


    CSS Howto..

    How to change content of a div after link click using CSS :target?

    How to make display:flex work for responsiveness - Bootstrap?

    How to position a fixed div under another fixed div?

    Dialogs are showing at the bottom of the page

    Javascript/Jquery How to catch the use of a CSS class

    How to make a CSS file valid?

    How to combine this css?

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    CSS how to make special div shape

    CSS - How to center a div relative to a background image positioned as cover

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to make a small icon using css?

    How to use “css” in the “jsp” in Spring MVC project?

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to change visibility of a div css to visible with jQuery

    How to create a CSS only (vertical) drop-down menu?

    jquery style sheet switcher - how to effect only theme css?

    How to make a font gisha-regular?

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How can I print a full gridview area via a custom print window?

    How to give outer glow effect to column in HTML/CSS?

    How do I ONLY add a box-shadow to the bottom with the following css?

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to make infinite movement of a div?

    How to make a full width sub-menu [closed]

    How do I get my header to align with my navigation bar at the center of my page?

    How to enter PHP data into

    How to create a table with fixed layout?

    using jquery show/hide doesn't keep css in div