Highlighted

Bootstrap class toggling

Explorer ,
Apr 26, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

909

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

Bootstrap class toggling

Explorer ,
Apr 26, 2018

Copy link to clipboard

Copied

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

TOPICS
Learn Dreamweaver

Views

910

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
Apr 26, 2018 0
Adobe Community Professional ,
Apr 26, 2018

Copy link to clipboard

Copied

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...
Apr 26, 2018 1
Explorer ,
Apr 27, 2018

Copy link to clipboard

Copied

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

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...
Apr 27, 2018 0
LEGEND ,
Apr 27, 2018

Copy link to clipboard

Copied

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>

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...
Apr 27, 2018 1
Explorer ,
Apr 27, 2018

Copy link to clipboard

Copied

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

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...
Apr 27, 2018 0
osgood_ LATEST
LEGEND ,
Apr 28, 2018

Copy link to clipboard

Copied

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.

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...
Apr 28, 2018 0