Highlighted

Bootstrap 4/jQuery expand/collapse oddity

LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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.

Untitled-1.gif

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

Untitled-2.gif

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

Untitled-3.gif

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

Untitled-4.gif

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,

^ _ ^

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:

<script>

$(document).ready(function(){

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

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

if(status === "+") {

$('#exp').html('&minus;');

}

else {

$('#exp').html('&plus;');

}

});

});

</script>

Views

1.2K

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 4/jQuery expand/collapse oddity

LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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.

Untitled-1.gif

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

Untitled-2.gif

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

Untitled-3.gif

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

Untitled-4.gif

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,

^ _ ^

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:

<script>

$(document).ready(function(){

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

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

if(status === "+") {

$('#exp').html('&minus;');

}

else {

$('#exp').html('&plus;');

}

});

});

</script>

Views

1.2K

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
May 23, 2018 0
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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.

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...
May 23, 2018 0
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

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...
May 23, 2018 0
Adobe Community Professional ,
May 23, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
May 23, 2018 0
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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,

^ _ ^

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...
May 23, 2018 0
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

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:

<script>

$(document).ready(function(){

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

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

if(status === "+") {

$('#exp').html('&minus;');

}

else {

$('#exp').html('&plus;');

}

});

});

</script>

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...
May 23, 2018 1
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

I replaced your if/else with a switch/case, and it's not working.

As suggested, I placed a span around the word "Archive" and gave it an ID of "show_archives".  In jQuery, I commented out the code currently in place, and put:

$('#show_archives').on('click',function(){// also tried .click(function(){});, no change.

    var arcStat = $('#exp').text(); // I also tried .html(), no change.

    switch(arcStat){

          case "+":

              $('#exp').html('&minus;');

          break;

          case "-":

              $('#exp').html('&plus;');

          break;

          }

    });

The plus is never changing to a minus.

V/r,

^ _ ^

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...
May 23, 2018 0
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

AHA!  I got it. 

For some reason, FireFox isn't interpreting "&minus;" via jQuery .text().  So, I replaced &plus; with +, and &minus; with - (in both HTML and jQuery), and it works. 

So, I'm still going to mark your answer as correct since you put me on the right track.  Thanks!

V/r,

^ _ ^

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...
May 23, 2018 0
osgood_ LATEST
LEGEND ,
May 23, 2018

Copy link to clipboard

Copied

WolfShade  wrote

AHA!  I got it. 

For some reason, FireFox isn't interpreting "&minus;" via jQuery .text().  So, I replaced &plus; with +, and &minus; with - (in both HTML and jQuery), and it works. 

So, I'm still going to mark your answer as correct since you put me on the right track.  Thanks!

V/r,

^ _ ^

Yeah its a bit goofy like that. I did an alert(status) to see what it was returning.

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...
May 23, 2018 0