Skip to main content
T
tim cross
Inspiring
February 27, 2019
Question

bootstap tabs

  • February 27, 2019
  • 2 replies
  • 1399 views

I wonder if anyone can solve this issue Im having with bootstrap tabs?

It seems to go wrong from tab 4 and 5, the rest seem to work ok

it uses collapseTwo1 and headingTwo1 which the numbers change depending on the tab.

Thanks

Tim

-------

------

<!doctype html>

<html><head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Untitled Document</title>

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700,800,900" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Expanded:500,700" rel="stylesheet">

<link rel="stylesheet" href="css/general.css" />

<link rel="stylesheet" href="css/owl.carousel.min.css" />

<link rel="stylesheet" href="css/carousel-general-events.css" />

<!--script for navbar start-->

<!-- jQuery library -->

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->

<link rel="stylesheet" href="css/bootstrap-4.2.1.css" />

<link href="css/search-pages.css" rel="stylesheet" type="text/css">

<link href="css/advertising-panels.css" rel="stylesheet" type="text/css">

<!--script for navbar start-->

</head>

<body class="headert-top-text">

<!--Container Start-->

<div class="main-container">

  

  

    <br>

    <br>

 

    <br>

  

   <div id="accordion1" role="tablist">

     

     

      <div class="card">

        <div class="card-header font" role="tab" id="headingOne1">

          <h5 class="mb-0"> <a data-toggle="collapse" href="#collapseOne1" role="button" aria-expanded="true" aria-controls="collapseOne1"> tab1 </a> </h5>

        </div>

        <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordion1">

          <div class="card-body">

            <div class="membership-panel-container">

            

              <!--membershp panel 1 Start-->

              <div class="card mb-4 shadow-sm membership-panels-size font membership-panel1">

                <div class="card-header">

                  <h4 class="my-0 font-weight-normal">Free</h4>

                </div>

                <div class="card-body">

                  <h1 class="card-title pricing-card-title">£0 <small class="text-muted">/ mo</small></h1>

                  <ul class="list-unstyled mt-3 mb-4">

                    <li>10 users included</li>

                    <li>2 GB of storage</li>

                    <li>Email support</li>

                    <li>Help center access</li>

                  </ul>

                  <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>

                </div>

              </div>

              <!--membershp panel 1 end-->

            

            

              <!--membershp panel 1 Start-->

              <div class="card mb-4 shadow-sm membership-panels-size membersip-panel2 font">

                <div class="card-header membership-green">

                  <h4 class="my-0 font-weight-normal text-white">Premier</h4>

                </div>

                <div class="card-body">

                  <h1 class="card-title pricing-card-title">£0 <small class="text-muted">/ mo</small></h1>

                  <ul class="list-unstyled mt-3 mb-4">

                    <li>10 users included</li>

                    <li>2 GB of storage</li>

                    <li>Email support</li>

                    <li>Help center access</li>

                  </ul>

                  <button type="button" class="btn btn-lg btn-block membership-green text-white">Join Now</button>

                </div>

              </div>

              <!--membershp panel 1 end-->

            

            

              <!--membershp panel 1 Start-->

              <div class="card mb-4 shadow-sm membership-panels-size membership-panel3 font">

                <div class="card-header membership-blue">

                  <h4 class="my-0 font-weight-normal text-white">Pro</h4>

                </div>

                <div class="card-body">

                  <h1 class="card-title pricing-card-title">£0 <small class="text-muted">/ mo</small></h1>

                  <ul class="list-unstyled mt-3 mb-4">

                    <li>10 users included</li>

                    <li>2 GB of storage</li>

                    <li>Email support</li>

                    <li>Help center access</li>

                  </ul>

                  <button type="button" class="btn btn-lg btn-block membership-blue text-white">Join Now</button>

                </div>

              </div>

              </div>

          </div>

        </div>

      </div>

     

        <!--membershp panel 1 end-->

      

             <!--membershp panel 2 start-->

     

      <div class="card">

        <div class="card-header font" role="tab" id="headingTwo1">

          <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseTwo1" role="button" aria-expanded="false" aria-controls="collapseTwo1"> tab2</a> </h5>

        </div>

        <div id="collapseTwo1" class="collapse" role="tabpanel" aria-labelledby="headingTwo1" data-parent="#accordion1">

          <div class="card-body">

        

            

     

              <p class="photo-tab-text font">Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi.auris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur male Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriCurabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

            

            

            

            

              <div class="photo9"></div>

              

  </div>

          

          

          

          

            </div>

        </div>

      </div>

    

     <!--membershp panel 2 end-->

      

             <!--membershp panel 3 start-->

            

            

      <div class="card">

        <div class="card-header font" role="tab" id="headingThree1">

          <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseThree1" role="button" aria-expanded="false" aria-controls="collapseThree1"> tab3</a> </h5>

        </div>

        <div id="collapseThree1" class="collapse" role="tabpanel" aria-labelledby="headingThree1" data-parent="#accordion1">

           <div class="card-body">

       

              <p class="photo-tab-text font">Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi.auris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur male Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriCurabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

            

            

            

            

              <div class="photo10"></div>

          

</div>

      </div>

  </div>

<!--membershp panel 3 end-->

      

             <!--membershp panel 4 start-->

     

      <div class="card">

        <div class="card-header font" role="tab" id="headingFour1">

          <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseFour1" role="button" aria-expanded="false" aria-controls="collapseFour1"> tab4</a> </h5>

        </div>

        <div id="collapseFour1" class="collapse" role="tabpanel" aria-labelledby="headingFour1" data-parent="#accordion1">

          <div class="card-body">

        

            

     

              <p class="photo-tab-text font">Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi.auris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur male Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriCurabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

            

            

            

            

              <div class="photo11"></div>

              

       </div>

</div>

        </div>

      

    <!--membershp panel 4 end-->

      

             <!--membershp panel 5 start-->

     

      <div class="card">

        <div class="card-header font" role="tab" id="headingFive1">

          <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseFive1" role="button" aria-expanded="false" aria-controls="collapseFive1"> tab5</a> </h5>

        </div>

        <div id="collapseFive1" class="collapse" role="tabpanel" aria-labelledby="headingFive1" data-parent="#accordion1">

          <div class="card-body">

        

            

     

              <p class="photo-tab-text font">Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi.auris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. ros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur male Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante sceleriCurabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

            

            

            

            

              <div class="photo12"></div>

              

       </div>

</div>

        </div>

      

       <!--membershp panel 5 end-->

      

         

</div>

<!--Container end-->

<br>

<br>

<br>

<script src="js/popper.min.js"></script>

  <script src="js/bootstrap-4.2.1.js"></script>

<script>

  <!-- scroll menu bar script -->

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

  <!-- end menu scroll top bar script -->

</script>

<!-- date-scroll bar -->

<script>

  <!-- scroll top bar script -->

$(document).ready(function(){

$( ".date-scrollable-nav" ).draggable({ axis: 'x' });

});

  <!-- end scroll top bar script -->

</script>

<!--Scripts start-->

<script src="js/modernizr-3.5.0.min.js"></script>

  <script src="js/jquery-3.3.1.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="js/owl.carousel.min.js"></script>

</body>

</html>

-----

----

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 28, 2019
  1. Create a new Bootstrap document.
  2. SaveAs accordion.html
  3. Insert > Bootstrap Components >  Accordion.
  4. Copy & paste the 3rd  card 2 more times and adjust the class names.
  5. Resulting code should look like this:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Panels</title>
<link rel="stylesheet" href="css/bootstrap-4.2.1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div id="accordion1" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne1">
<h5 class="mb-0"> <a data-toggle="collapse" href="#collapseOne1" role="button" aria-expanded="true" aria-controls="collapseOne1"> Collapsible Group 1 </a> </h5>
</div>
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordion1">
<div class="card-body">Content for Accordion Panel 1</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo1">
<h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseTwo1" role="button" aria-expanded="false" aria-controls="collapseTwo1"> Collapsible Group 2 </a> </h5>
</div>
<div id="collapseTwo1" class="collapse" role="tabpanel" aria-labelledby="headingTwo1" data-parent="#accordion1">
<div class="card-body">Content for Accordion Panel 2</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree1">
<h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseThree1" role="button" aria-expanded="false" aria-controls="collapseThree1"> Collapsible Group 3 </a> </h5>
</div>
<div id="collapseThree1" class="collapse" role="tabpanel" aria-labelledby="headingThree1" data-parent="#accordion1">
<div class="card-body">Content for Accordion Panel 3</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFour1">
<h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseFour1" role="button" aria-expanded="false" aria-controls="collapseFour1"> Collapsible Group 4 </a> </h5>
</div>
<div id="collapseFour1" class="collapse" role="tabpanel" aria-labelledby="headingFour1" data-parent="#accordion1">
<div class="card-body">Content for Accordion Panel 4</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingFive1">
<h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseFive1" role="button" aria-expanded="false" aria-controls="collapseFive1"> Collapsible Group 5 </a> </h5>
</div>
<div id="collapseFive1" class="collapse" role="tabpanel" aria-labelledby="headingFive1" data-parent="#accordion1">
<div class="card-body">Content for Accordion Panel 5</div>
</div>
</div>
<!--/accordion1--></div>
<!--/col--></div>
<!--/row--></div>
<!--/container--></div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>




Nancy O'Shea— Product User & Community Expert
ALsp
ALsp
Legend
February 28, 2019

Wow. So, there is no way to automatically build and then manage a Bootstrap accordion in Dreamweaver? And what's with aria. A properly coded accordion should not require aria - unless it is using older techniques such as display: none/block to hide and show panels. Just an FYI.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 28, 2019

Of course there is but Tim's code is a train wreck. I'm trying to get back to the basic Bootstrap strructure which is container, row, div.   As for aria labels, that's the code DW inserts. 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 27, 2019

Seriously Tim get rid of all that mumbo jumbo junk code that Bootstrap presents and use something that is more manageable when things go wrong.

Here's your accordion structure:

<div class="accordion">

<h5 class="text-primary">Tab 1</h5>

<div class="accordion_panel active_panel">

<p>Panel 1</p>

</div>

<!-- end accordion panel -->

<h5 class="text-primary">Tab 2</h5>

<div class="accordion_panel">

<p>Panel 2</p>

</div>

<!-- end accordion panel -->

<h5 class="text-primary">Tab 3</h5>

<div class="accordion_panel">

<p>Panel 3</p>

</div>

<!-- end accordion panel -->

<h5 class="text-primary">Tab 4 </h5>

<div class="accordion_panel">

<p>Panel 4</p>

</div>

<!-- end accordion panel -->

<h5 class="text-primary">Tab 5</h5>

<div class="accordion_panel">

<p>Panel 5</p>

</div>

<!-- end accordion panel -->

</div>

<!-- end accordion -->

Here's your css:

.accordion {

width: 90%;

margin: 0 auto;

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

}

.accordion h5 {

background-color: #f2f2f2;

padding: 15px;

margin: 0;

border-bottom: 1px solid #ccc;

}

.accordion_panel {

display: none;

padding: 10px;

border-bottom: 1px solid #ccc;

}

.accordion_panel p {

padding: 15px;

margin: 0;

}

.active_panel {

display: block;

}

Here's your jQuery:

<script>

$(document).ready(function(){

$('.accordion h5').css('cursor' , 'pointer').click(function(){

$('.accordion_panel').slideUp();

$(this).next('.accordion_panel').slideDown();

});

});

</script>

A much cleaner and more manageable solution. Now just imagine the rest of your code like that without all that excessive Bootstrap junk, nice! How anyone in their right mind could argue against that approach is beyond me.

    ALsp
    ALsp
    Legend
    February 27, 2019

    I don't want to get the Bootstrap fan club here enraged again but you have to chuckle at the irony in Bootstrap being originally developed by a team of folks working for a company that restricts posts on it web site to 112 characters. Not the mention that said web site is the absolute worst performing social media site on our little planet.

      O
      osgood_
      Legend
      February 27, 2019

      Nothing makes much sense to me any more apart from I get the feeling poorly educated developers gravitate towards using workflows that some of the biggest companies on the planet use. Now some may consider that to be a good approach (if you're a dumb developer). It may be suited to a large development team in terms of its not the best option but its the 'best' given the scale of the projects involved but when you're a small development team/freelance operator, with even smaller clients, building smaller solutions using this approach shows ignorance is alive and kicking.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices