Good day. Tell me, please, how can I close the tab when I press it again? And one more thing: how to hide the '.bobs' block when opening any tab? Thanks a lot for your help!

$(".social_icons>a").click(function() { $(".social_icons>a").removeClass("current"); $(this).addClass("current"); $(".social_container>div").hide(); t_content=$(this).attr("href"); $(t_content).show('500'); return false }); 
 .social_container { width:300px; height:50px; background: chocolate; } .social_container > div { display: none } .social_icons > a.current { background: aqua; } .bobs { width:100px; height:100px; background: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="social_icons"> <a href="#content1">Вкладка 1</a> <a href="#content2">Вкладка 2</a> <a href="#content3">Вкладка 3</a> <div class="social_container"> <div id="content1">Содержимое 1</div> <div id="content2">Содержимое 2</div> <div id="content3">Содержимое 3</div> </div> </div> <div class="bobs"></div>

    1 answer 1

    In the click handler, check the button to see if it has a .current class or not. For example:

     $(".social_icons>a").click(function() { if (!$(this).hasClass('current')) { $(".social_icons>a").removeClass("current"); $(this).addClass("current"); $(".social_container>div").hide(); t_content = $(this).attr("href"); $(t_content).show('500'); $('.bobs').hide(); } else { $(this).removeClass("current"); $(".social_container>div").hide(); $('.bobs').show(); } return false }); 
     .social_container { width: 300px; height: 50px; background: chocolate; } .social_container>div { display: none } .social_icons>a.current { background: aqua; } .bobs { width: 100px; height: 100px; background: red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="social_icons"> <a href="#content1">Вкладка 1</a> <a href="#content2">Вкладка 2</a> <a href="#content3">Вкладка 3</a> <div class="social_container"> <div id="content1">Содержимое 1</div> <div id="content2">Содержимое 2</div> <div id="content3">Содержимое 3</div> </div> </div> <div class="bobs"></div>

    • Understood, figured out, now I will know. Thank you so much and good luck! - LADYX
    • I apologize, tell me, please, it does not work out for you. When you click on links, in order to open tabs, the page itself scrolls. Where is my mistake? - LADYX
    • oh, sorry, I forgot to take the code in '$ (document) .ready (function () {', this is my carelessness. Everything works. Thank you! - LADYX
    • No, the case is apparently quite different. Scrolling the page happens. Tell me, please, is it possible to replace the references to the data-id attributes, how to do it correctly, to eliminate any possibility of scrolling? Once again I apologize, I can not figure it out myself. - LADYX
    • @LADYX did not quite understand what a scroll was - Cheg