CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
possum_pendulum
possum_pendulum

Reputation: 179

Bootstrap Justified Collapse Button Group

I want to have a Bootstrap justified button group, where each button opens a collapsed <div> beneath it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid bg-grey text-center" id="about">
    <div class="row">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-target="#about1">Forms &amp Websites</button>
            </div>
            <div id="about1" class="collapse">
                <p>C# Windows Apps and Microsoft Azure Database Integration</p>
                <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
            </div>

            <div class="btn-group">
                <button class="btn btn-info" id="about2-btn" data-toggle="collapse" data-target="#about2">Computer Architecture</button>
            </div>
            <div id="about2" class="collapse">
                <p>Combinational/Sequential Circuitry, Assembly Language</p>
                <p>Thread-Level Multiprocessing and Process Scheduling</p>
                <p>Networks and OS Integration</p>
            </div>

            <div class="btn-group">
                <button class="btn btn-info" id="about3-btn" data-toggle="collapse" data-target="#about3">Programming Concepts (C++)</button>
            </div>
            <div id="about3" class="collapse">
                <p>OOP, Inheritance &amp Polymorphism</p>
                <p>Memory Management, Advanced/Custom Data Structures</p>
            </div>
        </div>
    </div>
</div>

This results in the first button (left) opening its div weirdly with part of the button disappearing, and the other two buttons not opening their content at all.

I feel I am close but may not have nested the <div>s correctly.

Upvotes: 1

Views: 1865

Answers (2)

happymacarts
happymacarts

Reputation: 2595

I used the events to make it only show one at a time I think this may give you a better result

I moved the elements to their own row to make it more scalable in case you add more buttons and more responsive for device sizes

$(document).ready(function() {
  $('#sub').on('show.bs.collapse', function() {
    $('#sub .collapse').collapse('hide')
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid bg-grey text-center">
  <div class="row">
    <div class="btn-group btn-group-justified" id="myCollapsible">
      <div class="btn-group">
        <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-parent="#sub" data-target="#about1">Forms &amp Websites</button>
      </div>

      <div class="btn-group">
        <button class="btn btn-info" id="about2-btn" data-toggle="collapse" data-parent="#sub" data-target="#about2">Computer Architecture</button>
      </div>

      <div class="btn-group">
        <button class="btn btn-info" id="about3-btn" data-toggle="collapse" data-parent="#sub" data-target="#about3">Programming Concepts (C++)</button>
      </div>
    </div>
  </div>

  <div class="row" id="sub">
    <div id="about1" class="collapse">
      <p>C# Windows Apps and Microsoft Azure Database Integration</p>
      <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
    </div>

    <div id="about2" class="collapse">
      <p>Combinational/Sequential Circuitry, Assembly Language</p>
      <p>Thread-Level Multiprocessing and Process Scheduling</p>
      <p>Networks and OS Integration</p>
    </div>

    <div id="about3" class="collapse">
      <p>OOP, Inheritance &amp Polymorphism</p>
      <p>Memory Management, Advanced/Custom Data Structures</p>
    </div>
  </div>
</div>

Upvotes: 2

LewisAntonio803
LewisAntonio803

Reputation: 69

I believe the nesting is wrong. Try to put the divs with 'about' ids within the divs with the 'btn-group' classes. 

        <div class="btn-group">
            <button class="btn btn-info" id="about1-btn" data-toggle="collapse" data-target="#about1">Forms &amp Websites</button>
        <div id="about1" class="collapse">
            <p>C# Windows Apps and Microsoft Azure Database Integration</p>
            <p>HTML5, CSS, JavaScript, jQuery, PHP, and MySQL</p>
        </div>
        </div>

Also, as already mentioned, you are missing quotes.

Upvotes: 0

Related Questions