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
-------
------
<!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>
-----
----
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.
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.
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.
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
Copy link to clipboard
Copied
<!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>
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.
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.
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.
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.
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.
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.