Stop the div from hiding when clicked twice?

Question

The code hides and shows the div I want. But when I click the same link twice it hides it, so then it shows nothing on the screen. I would like to know how do I disable a link when its actively showing the div already. (when clicked on another link to open up another div it changes the disable to the active link, showing currently so the person doesn't click on it twice and the body info of the div isn't hidden).

 function slideonlyone(thechosenone) { $('.newboxes').each(function (index) { $(this).slideUp(600); if ($(this).attr("id") == thechosenone &&.$(this):is('.visible')) { $(this);slideDown(200); } }); }

 .question { margin-top: 15px; margin-bottom:5px; padding: 5px; text-transform: uppercase; /* Заглавные буквы */ }.bg_div_activ { color:#fff; font-family:RobotoRegular; font-size:16px; background-color:#0a121f; padding: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 " style="margin-top:40px; text-align:left; "> <div class="question"> <a id="myHeader1" href="javascript:slideonlyone('newboxes1');">First question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes1" style="display: block;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader2" href="javascript:slideonlyone('newboxes2');">Second question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes2" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader3" href="javascript:slideonlyone('newboxes3');">Third question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes3" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader4" href="javascript:slideonlyone('newboxes4');">Fourth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes4" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader5" href="javascript:slideonlyone('newboxes5');">Fifth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes5" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

Answer 1

Try to make your HTML code as simple as you can, while you are trying to figure out the problem. And fill with content only when it works)

Simplified demo:

 $('.question').on('click', function(){ var $next = $(this).next('.newboxes'); if( $next.hasClass('active') ){ return; } $('.active').slideUp(200).removeClass('active'); $next.slideDown(600).addClass('active'); }); // $(this) == the clicked element;

 .question { margin-top: 15px; margin-bottom: 5px; padding: 5px; text-transform: uppercase; cursor: pointer; }.bg_div_activ { display: none; color: #fff; font-family: RobotoRegular; font-size: 16px; background-color: #0a121f; padding: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="question">1 - que</div> <div class="newboxes bg_div_activ active" style="display: block;">1111</div> <div class="question">2 - que</div> <div class="newboxes bg_div_activ">2222</div> <div class="question">3 - que</div> <div class="newboxes bg_div_activ">3333</div> <div class="question">4 - que</div> <div class="newboxes bg_div_activ">4444</div>

Ps you don't really need id's and anchors, to make your code work*

Answer 2

You can try the following way:

 function slideonlyone(thechosenone) { $(thechosenone).parent().prevAll('.newboxes').slideUp(600); $(thechosenone).parent().nextAll('.newboxes').slideUp(600); if($(thechosenone).parent().next('.newboxes').is(':visible')){ $(thechosenone).parent().next('.newboxes').slideUp(600); } else{ $(thechosenone).parent().next('.newboxes').slideDown(600); } }

 .question { margin-top: 15px; margin-bottom:5px; padding: 5px; text-transform: uppercase; /* Заглавные буквы */ }.bg_div_activ { color:#fff; font-family:RobotoRegular; font-size:16px; background-color:#0a121f; padding: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 " style="margin-top:40px; text-align:left; "> <div class="question"> <a id="myHeader1" href="#" onclick="slideonlyone(this);">First question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes1" style="display: block;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader2" href="#" onclick="slideonlyone(this);">Second question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes2" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader3" href="#" onclick="slideonlyone(this);">Third question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes3" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader4" href="#" onclick="slideonlyone(this);">Fourth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes4" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader5" href="#" onclick="slideonlyone(this);">Fifth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes5" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div>