Javascript/jQuery - Hide on click

Question

I'm fairly new to JS, so please be gentle.

I have a set of tabs that I'm making into an accordion when mobile. It works great but, in mobile, I would like to have the "tabs" close when I tap them again. I tried adding a .hide() when clicked but nothing happened. What am I doing wrong? The markup looks something like this:

<ul class="tabs">
  <li class="active" rel="tab1">Tab 1</li>
  <li rel="tab2">Tab 2</li>
  <li rel="tab3">Tab 3</li>
  <li rel="tab4">Tab 4</li>
</ul>

<div class="tab_container">
  <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
  <div id="tab1" class="tab_content">
      <h2>Tab 1 content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
  </div>
  <!-- #tab1 -->

  <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
  <div id="tab2" class="tab_content">
      <h2>Tab 2 content</h2>
        <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
  </div>
  <!-- #tab2 -->

  <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
  <div id="tab3" class="tab_content">
      <h2>Tab 3 content</h2>
        <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>
  </div>
  <!-- #tab3 -->

  <h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3>
  <div id="tab4" class="tab_content">
      <h2>Tab 4 content</h2>
        <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
  </div>
  <!-- #tab4 --> 

</div>
<!-- .tab_container -->

The JS looks something like this:

 // tabbed content
$(".tab_content").hide();
$(".tab_content:first").show();

  /* if in tab mode */
$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel"); 
  $("#"+activeTab).fadeIn();        

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel"); 
  $("#"+d_activeTab).fadeIn();                         
  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");

if(".tab_drawer_heading".hasClass('d_active')){ */This is what I tried to make it hide*/
  $(".tab_drawer_heading").click(function() {
    $("this.tab_content").hide();
})};
});


/* Extra class "tab_last" 
   to add border to right side
   of last tab */
$('ul.tabs li').last().addClass("tab_last");

I used the code here and adapted it to my needs and content.

Vijai · Answer 1 · 2016-10-18T23:57:56.423

0

If I understand your problem correctly. If you want to close the "tab_content" section onclick for Mobile devices just add the below function.

    $(".tab_content").click(function() {

       if ($(window).width() <= 700){   
        // do something for mobile devices
       $(this).hide();
    }

    });

edited Oct 18 '16 at 23:57

answered Oct 18 '16 at 23:52

Vijai

1,741
3
17
22

score 0 · Answer 2 · answered Oct 18 '16 at 23:53

You can check if the clicked tab is the active tab and if yes return after you close the active tabs.

// Lets detect if it is a phone, you can use your code here
var isMobile = false;
/* From http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery */
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    isMobile = true;
}


// Lets fix your code here
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {

    $(".tab_content").hide();
    var d_activeTab = $(this).attr("rel");

    // If `this` is active
    if(isMobile && $("ul.tabs li[rel^='"+d_activeTab+"']").hasClass("active")){
        $(".tab_drawer_heading").removeClass("d_active");
        $("ul.tabs li").removeClass("active");
        return;
    }

    $("#"+d_activeTab).fadeIn();                         
    $(".tab_drawer_heading").removeClass("d_active");
    $(this).addClass("d_active");

    $("ul.tabs li").removeClass("active");
    $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});

Also keep in mind that we usually attach an event only onece, so any elementX.click should not be inside a function that you call many times.

Javascript/jQuery - Hide on click

2 Answers2