CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapbootstrap-4
CalistoQueets
CalistoQueets

Reputation: 13

Bootstrap button doesn't disable after pressed

I have a couple of collapsible buttons. When I click one of them the other ones collapse their content so only one show it's content at a time. The problem is that when i click a second time on the non collapsed button it hides their content leaving a white gap.

I have this HTML:

<div class="flex-colum" id="btons">
     <button type="button" class="btn btn-bg-md btn-outline-primary active" data-toggle="collapse" data-target="#coll1" aria-pressed="false" autocomplete="off" id="btn1">Button 1</button>
     <button type="button" class="btn btn-bg-md btn-outline-primary" data-toggle="collapse" data-target="#coll2" aria-pressed="false" autocomplete="off" id="btn2">Button 2</button>                                
</div>                                                                
<div class="container">
     <div class="collapse show" data-parent="#section_four" id="coll1">
          <div class="container">
          <h1>Hello im conllapse 1</h1>
          </div>
     </div>
     <div class="collapse show" data-parent="#section_four" id="coll2">
          <div class="container">
          <h1>Hello im conllapse 2</h1>
          </div>                                                    
     </div>
</div>

How can I do something like this:

I have tried this:

$('#btons').on('click', '.btn', function() {
     $(this).addClass('active').siblings().removeClass('active');
     $('#btons').find('.collapse').collapse('hide');   
});

Also I tryied to set the button disabled if active and return if hasClass active.

What can I do to show always the content if the button is active? Any ideas?

Upvotes: 0

Views: 224

Answers (3)

KuldipKoradia
KuldipKoradia

Reputation: 3031

if you are using bootstrap 4 then why you are going for the custom code of multiple collapse. there is already nav pills component for doing the same what you want.

follow this code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
</style>
</head>
<body>
  <div class="container">
    <ul class="nav nav-pills" role="tablist">
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link active" data-toggle="pill" href="#home">button 1</button>
      </li>
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link" data-toggle="pill" href="#menu1">button 2</button>
      </li>
      <li class="nav-item">
        <button type="button" class="btn btn-bg-md btn-outline-primary nav-link" data-toggle="pill" href="#menu2">button 3</button>
      </li>
    </ul>
    <div class="tab-content">
      <div id="home" class="container tab-pane active"><br>
        <h3>Button 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="container tab-pane fade"><br>
        <h3>Button 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu2" class="container tab-pane fade"><br>
        <h3>Button 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</body>
</html>

Thank you...

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can handle the desired behaviour on click of button and make first button content show by default by adding show class to collapse div.

see below code

$(function(){
  //make button 1 clicked by default
  $('#coll1').addClass('show');
  $('#btons').on('click', '.btn', function(){
     $('.container div.collapse').removeClass('show');
     var target = $(this).data('target');
     $(target).addClass('show');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flex-colum" id="btons">
     <button type="button" class="btn btn-bg-md btn-outline-primary active" data-toggle="collapse" data-target="#coll1" aria-pressed="false" autocomplete="off" id="btn1">Button 1</button>
     <button type="button" class="btn btn-bg-md btn-outline-primary" data-toggle="collapse" data-target="#coll2" aria-pressed="false" autocomplete="off" id="btn2">Button 2</button>                                
</div>                                                                
<div class="container"> 
     <div class="collapse" data-parent="#section_four" id="coll1">
          <div class="container">
          <h1>Hello im conllapse 1</h1>
          </div>
     </div>
     <div class="collapse" data-parent="#section_five" id="coll2">
          <div class="container">
          <h1>Hello im conllapse 2</h1>
          </div>                                                    
     </div>
</div>

Upvotes: 0

Stavros Angelis
Stavros Angelis

Reputation: 962

I think I understood what you are trying to do: Try replacing your javascript with this: 

$('#btons').on('click', '.btn', function() {
    var id = $(this).attr("data-target");
    if ($(id).hasClass("show")) {
        return false;
    }
    $(".collapse").removeClass("show").addClass("hide");

    setTimeout(function() {
        $(id).removeClass("hide").addClass("show");
    }, 50);
});

What I do here is first I store the reference to the collapsable layer in the id variable. Then if it is already visible I stop the execution. If it is not I hide all the collapsable layers and then show only the one the user selected.

I hope this helps.

Upvotes: 0

Related Questions