bootstap tabs

Report · Feb 27, 2019

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>

<title>Untitled Document</title>

</head>

<br>

</div>

</div>

<li>10 users included</li>

<li>2 GB of storage</li>

<li>Email support</li>

<li>Help center access</li>

</ul>

</div>

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

</div>

<li>10 users included</li>

<li>2 GB of storage</li>

<li>Email support</li>

<li>Help center access</li>

</ul>

</div>

</div>

<li>10 users included</li>

<li>2 GB of storage</li>

<li>Email support</li>

<li>Help center access</li>

</ul>

</div>

</div>

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

</div>

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

</div>

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

</div>

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

</div>

<br>

$(document).ready(function(){

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

});

</script>

$(document).ready(function(){

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

});

</script>

</body>

</html>

-----

----

Report · Feb 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:

<p>Panel 1</p>

</div>

<p>Panel 2</p>

</div>

<p>Panel 3</p>

</div>

<p>Panel 4</p>

</div>

<p>Panel 5</p>

</div>

</div>

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:

$(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.

Report · Feb 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.

Report · Feb 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.

Report · Mar 04, 2019

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

Report · Feb 28, 2019

Create a new Bootstrap document.
SaveAs accordion.html
Insert > Bootstrap Components > Accordion.
Copy & paste the 3rd card 2 more times and adjust the class names.
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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 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.

Report · Feb 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 28, 2019

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.

Report · Feb 28, 2019

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.

Report · Feb 28, 2019

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 28, 2019

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.

Adobe Community

bootstap tabs