Skip to main content
A
Anonymous
April 26, 2018
Answered

Bootstrap class toggling

  • April 26, 2018
  • 2 replies
  • 1239 views

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">
<!-- .panel-group -->

<div class="panel panel-default">
<!-- .panel -->

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

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

<div class="s_d">
<!-- .s_d -->
<span>Title</span>
<!-- /.s_d -->
</div>

<div class="s2_d">
<!-- .s2_d -->
<span id="icon_bar1" class="icon_bar icon_bar1"></span>
<span id="icon_bar2" class="icon_bar icon_bar2"></span>
<!-- /.s2_d -->
</div>

<!-- /.panel-heading -->
</div>

<!-- /a -->
</a>


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

<div class="panel-body">
<!-- .panel-body -->

Content for Accordion Panel 1

<!-- /.panel-body -->
</div>

<!-- /.panel-collapse -->
</div>

<!-- /.panel -->
</div>

<!-- /.panel-group -->
</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

This topic has been closed for replies.
Correct answer BenPleysier

Have a look here BootStrap Accordion/Collapse with Toggle Icon

2 replies

A
Anonymous
April 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);

O
osgood_
Legend
April 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.

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
April 27, 2018

Have a look here BootStrap Accordion/Collapse with Toggle Icon

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
A
Anonymous
April 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

O
osgood_
Legend
April 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>

<meta charset="UTF-8" />

<title>Accordion Panel</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<div class="accord">

<div class="accord_title">

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

</div>

<!-- accord title -->

<div class="accord_body">

<!-- end accord_title -->

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

<!-- accord_body -->

<div class="accord_title">

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

</div>

<!-- end accordn_title -->

<div class="accord_body">

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

<!-- accord_body -->

<div class="accord_title">

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

</div>

<!-- end accord_title -->

<div class="accord_body">

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

<!-- accord_body -->

</div>

<!-- accord -->

<!-- jQuery library -->

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Latest compiled JavaScript -->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

$(document).ready(function(){

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

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

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

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

});});

</script>

</body>

</html>

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