Bootstrap class toggling

Report · Apr 26, 2018

Best Adobe Community,

Initially I want to make clear that I have begun with an earlier Bootstrap version (v3.3.7) and it works well for my purposes.

I have added icon bars to the panel heading of the accordion. What I want is the most effective and reliable way of toggling the class of the icon bar (maybe similar to the toggling of the menu). I have namely added two icon bars with CSS transform to form a cross as the panel is opened.

I tried, for fun, adding JavaScript onclick but the problem with that was the independence of the collapsing of the panel. If you clicked fast enough, the transformation of the icon bars would switch (giving me a cross when the panel is collapsed)... Suppose you can work around this by adding event listeners of the CSS transition.

But I'd prefer what I achieved with the menu toggling. Discerning between two states simply by two different CSS classes .navbar-toggle and .navbar-toggle.collapsed.

Below is first the HTML code (showing me having moved out the a tag to contain the panel-heading) and the CSS classes of one of the icon bars (the first is the default state): HTML:

<div id="accordion1" class="panel-group" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">

<a href="#collapseOne1" class="gamma" data-toggle="collapse" data-parent="#accordion1">

<div class="panel-heading clearfix" role="tab">

<div class="s_d">

<span>Title</span>

</div>

<div class="s2_d">

<span id="icon_bar1" class="icon_bar icon_bar1"></span>
<span id="icon_bar2" class="icon_bar icon_bar2"></span>

</div>

</div>

</a>

<div id="collapseOne1" class="panel-collapse collapse">

<div class="panel-body">

Content for Accordion Panel 1

</div>

</div>

</div>

</div>

CSS:

#accordion1 .icon_bar1 {

-ms-transform:translate(0,15px);

-webkit-transform:translate(0,15px);

-moz-transform:translate(0,15px);

-o-transform:translate(0,15px);

transform:translate(0,15px);

-ms-transition:0.3s;

-webkit-transition:0.3s;

-moz-transition:0.3s;

-o-transition:0.3s;

transition:0.3s;

}

#accordion1 .icon_bar1_2 {

-ms-transform:translate(0,15px);

-ms-transform:rotate(45deg);

-webkit-transform:translate(0,15px);

-webkit-transform:rotate(45deg);

-moz-transform:translate(0,15px);

-moz-transform:rotate(45deg);

-o-transform:translate(0,15px);

-o-transform:rotate(45deg);

transform:translate(0,15px) rotate(45deg);

-ms-transition:0.3s;

-webkit-transition:0.3s;

-moz-transition:0.3s;

-o-transition:0.3s;

transition:0.3s;

}

Thank you so so much on beforehand!

Regards,

Andreas

Report · Apr 26, 2018

Have a look here BootStrap Accordion/Collapse with Toggle Icon

Wappler, the only real Dreamweaver alternative.

Report · Apr 27, 2018

How would you modify that code if I wanted the opening/closing of one tab to not affect another one, meaning being able to for example have multiple tabs opened at the same time

Report · Apr 27, 2018

https://forums.adobe.com/people/Dominus+AB wrote
How would you modify that code if I wanted the opening/closing of one tab to not affect another one, meaning being able to for example have multiple tabs opened at the same time

I don't know regarding the Bootstrap version but seriously if you know just a small amount of coding you can write this in about 15mins using far less coding. (see example code below). I've included the Boostrap files so I can check nothing conflicts in terms of classes and anything else which is inside the Bootstrap css default file mess.

<!DOCTYPE>

<html>

<head>

<title>Accordion Panel</title>

<style>

body {

background-color: #26a69a;

color: #000;

margin: 100px 0 0 0;

}

.accord {

width: 75%;

margin: 0 auto;

}

.accord h4 {

font-size: 16px;

margin: 0;

padding: 0;

}

.accord_title {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #f2f2f2;

padding: 12px 25px;

margin-bottom: 5px;

}

.accord_body {

background-color: #f2f2f2;

padding: 12px 25px 25px 25px;

margin: -5px 0 5px 0;

}

.accord span:after {

content: '\002B';

font-weight: bold;

font-size: 21px;

}

.active span:after {

float: right;

content: "\2212";

font-weight: bold;

font-size: 21px;

}

</style>

</head>

<body>

<h4>Collapsible Group Item 1</h4><span></span>

</div>

<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a birdon it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>

</div>

<h4>Collapsible Group Item 2</h4><span></span>

</div>

<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a birdon it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>

</div>

<h4>Collapsible Group Item 3</h4><span></span>

</div>

<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a birdon it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>

</div>

</div>

$(document).ready(function(){

$('.accord_body').hide();

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

$(this).next('div').slideToggle();

$(this).toggleClass('active');

});});

</script>

</body>

</html>

Report · Apr 27, 2018

Thank you so much osgood_ but this time I awarded Ben with the correct answer

But would really like your opinions on my solution below...

This works fine but describe if it's suitable and what happens as this code is executed? ... Any ideas?

function toggleIcon(e) {

$(e.target)

.prev('.gamma')

.find(".icon_bar_1")

.toggleClass('icon_bar1 icon_bar1_2')

.end()

.find(".icon_bar_2")

.toggleClass('icon_bar2 icon_bar2_2');

}

$('.panel-group').on('hidden.bs.collapse', toggleIcon);

$('.panel-group').on('shown.bs.collapse', toggleIcon);

Report · Apr 28, 2018

This solution looks to me as though it would get hideously long and problematical to manage, depending on how many accordion panels you require.

I try to use more steamlined coding methods, be it html, css, or javascript, unfortunately steamlined isnt a built in characteristic of Bootstrap, you pay the price for using a one sized fits all method rather than a bespoke one.

If you think the original answer provided was correct given your additional requirement that more than one panel be active then theres not much l can add. Probably nicely sums up the 'developer' which this forum attracts.

Bootstrap class toggling

1 Correct answer