Legend

Answered

Bootstrap 4/jQuery expand/collapse oddity

Forum|Forum|7 years ago
May 23, 2018
2 replies
2093 views

Hello, all,

I have been working on a blog project, and with a few minor instances of troubleshooting it has been a pretty smooth job. But I just discovered something odd about an expand/collapse that I have coded; it's nothing major, it's just a minor annoyance for someone as pedantic as I am/can be.

There is a header called "Archive" that has a plus sign on the right. When you click it, a div expands that shows years and the plus turns into a minus via jQuery.

Then, click a year to display months in which at least one blog entry was submitted.

Then click a month to display titles for entered blog posts.

But, if you click a month to collapse the month, the minus in the header turns into a plus.

Okay, so, Bootstrap is handling the expand/collapse, I just use classes on the elements, and BAM, done. (Thanks, Bootstrap!)

But I'm using jQuery to change the plus/minus, and only on the primary div via "shown.bs.collapse" and "hidden.bs.collapse". So, when I collapse a month or year, it should not affect the header indicator. Unless I misunderstand and $('#archiveDiv') affects all child elements, too.

Anyone have any insight into why this is happening? I can provide some code, if that helps.

V/r,

^ _ ^

This topic has been closed for replies.

Correct answer osgood_

All you need to do is add a span around your 'Archive' text and give it an id of 'show_archives' as below:

<span id="show_archives">Archive</span>

Then change your jquery to the below (this gets the status either + or - and toggles the symbol accordingly:

$(document).ready(function(){

$('#show_archives').click(function(){

var status = $('#exp').text();

if(status === "+") {

$('#exp').html('−');

}

else {

$('#exp').html('+');

}

});

</script>

Nancy OShea

Community Expert

jQuery needs unique IDs to target specific elements or child elements. Have you done that with your Plus/Minus functions?

Nancy O'Shea— Product User & Community Expert

WolfShadeAuthor

Legend

Yes, all in-play elements have unique IDs. Here is some pseudo-code:

<div class="col-1"><!--- Left buffer ---></div>
<div class="col-7 headerRow" id="mainHeader">
    Recent Blogs
</div>
<div class="col-3 headerRow position-relative" id="archiveHeader" title="Archive">
    <div class="row position-absolute" data-toggle="collapse" data-target="#archivesDiv" aria-expanded="false" aria-controls="archivesDiv"><span class="right" id="exp">&plus;</span>Archive</div>
    <div class="row position-absolute" style="top: 35px;">
        <div class="collapse" id="archivesDiv">
               <div class="years" data-toggle="collapse" data-target="#months2014" aria-expanded="false" aria-controls="months2014">2014</div>
               <div class="months collapse" id="months2014">
                    <div data-toggle="collapse" data-target="#DEC2014" aria-expanded="false" aria-controls="DEC2014">DEC (3)</div>
                    <div class="days collapse" id="DEC2014">
                        <div><a href="{url}">Blog Post #3 Title</a></div>
                        <div><a href="{url}">Blog Post #2 Title</a></div>
                        <div><a href="{url}">Blog Post #1 Title</a></div>
                    </div>
                    <div data-toggle="collapse" data-target="#NOV2014" aria-expanded="false" aria-controls="NOV2014">NOV (1)</div>
                    <div class="days collapse" id="NOV2014">
                        <div><a href="{url}">Blog Post #1 Title</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-1"><!--- Right buffer ---></div>

<script>
    $('#archivesDiv').on('shown.bs.collapse',function(){$('#exp').html('&minus;');}).on('hidden.bs.collapse',function(){$('#exp').html('&plus;');});
</script>

This is what I'm doing, basically. I thought that the + or - next to "Archive" would be affected ONLY by the click of the word Archive, but it seems that any child element of Archive will trigger the +/- switch.

V/r,

^ _ ^

O

osgood_Correct answer

Legend

All you need to do is add a span around your 'Archive' text and give it an id of 'show_archives' as below:

<span id="show_archives">Archive</span>

Then change your jquery to the below (this gets the status either + or - and toggles the symbol accordingly:

$(document).ready(function(){

$('#show_archives').click(function(){

var status = $('#exp').text();

if(status === "+") {

$('#exp').html('−');

}

else {

$('#exp').html('+');

}

});

</script>

O

osgood_

Legend

I dont know how you have your code set up but let's say your 'Archives' text is an h4 tag. Give it a class or add a class name 'show_archives':

<h4 class="show_archives">Archive</h4>

Then add the below css selectors to your stylesheet.

.show_archives:after {

float: right;

content: '\002B';

font-weight: bold;

font-size: 21px;

}

.active:after {

float: right;

content: "\2212";

font-weight: bold;

font-size: 21px;

}

Then use the below jQuery to target ONLY the 'show_archives' class:

$(document).ready(function(){

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

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

});

And dont forget if you ARE writing your own jQuery then hook the page up to the full jQuery framework library NOT the jankie junk slim jQuery link that can be found on the Bootstrap set-up homepage, thats got half the stuff needed missing.

WolfShadeAuthor

Legend

That's a pretty slick method. I might look into something like that. Thanks!

V/r,

^ _ ^

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded