Highlighted

bootstap tabs

Explorer ,
Feb 27, 2019

Copy link to clipboard

Copied

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

Screenshot 2019-02-27 at 15.35.29.png

-------

------

<!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>

-----

----

Views

529

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

bootstap tabs

Explorer ,
Feb 27, 2019

Copy link to clipboard

Copied

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

Screenshot 2019-02-27 at 15.35.29.png

-------

------

<!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>

-----

----

Views

530

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 27, 2019 0
LEGEND ,
Feb 27, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2019 2
Mentor ,
Feb 27, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2019 1
LEGEND ,
Feb 27, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2019 1
Explorer ,
Mar 04, 2019

Copy link to clipboard

Copied

OK thank you for your comments! I have taken them on board and have corrected all my code so its all neat and tidy and W3c compliant ie zero errors. I have done most of my files just a few issues with tabs which I will ask a question in a sec.

Thanks

Tim

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 04, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

  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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 1
Mentor ,
Feb 28, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 0
LEGEND ,
Feb 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

Of course there is but Tim's code is a train wreck

Wonder why!

If you're going to use Bootstrap accordion it's probably best to use some kind of automated repeat process to manage the information, at least that way you only have the one block of code to deal with in the editor.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 0
Mentor ,
Feb 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

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. 

So, there is a UI in Dreamweaver, where you can insert a Bootstrap accordion and set options. Then you can open that UI again and add panels, remove panels, and change their order? And you can set each panel to have multi-columns - all visually, with no manual coding?

Just wondering.

And when you say Dreamweaver adds aria markup, do you mean that Bootstrap accordions do not use aria?

Again, just wondering.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 0
Adobe Community Professional ,
Feb 28, 2019

Copy link to clipboard

Copied

No.  There's no UI panel a la project seven's accordion panel magic.  

It's merely an insertion of code with aria labels as one would expect from Snippets folder.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 1
Mentor ,
Feb 28, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

No.  There's no UI panel a la project seven's accordion panel magic.  

It's merely an insertion of code with aria labels as one would expect from Snippets folder.

Ah. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2019 0