Switch the glyphicon based on the open/closed state of the collapsible element - Bootstrap

Is there a way to update the glyphicon based on whether or not a collapsible element is open?

This is the code I currently have:

    <div class="jumbotron ref" data-toggle="collapse" data-target="#collapse">
<div class="row">

<div class="col-md-11">

<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>

</div>

<div class="col-md-1">

<span class="glyphicon glyphicon-chevron-down"> <!-- part to change-->

    

<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>

</div>

         

javascripthtmlcssbootstrap-4

Answer №1

.jumbotron receives the .collapsed class when the menu is collapsed. This class can be targeted to modify the glyph.

In addition, it is recommended to apply the .collapsed class to the .jumbotron by default since the initial state is collapsed. However, this class will only be activated once you click to trigger the collapse effect.

.jumbotron.collapsed .glyphToChange {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
  <div class="row">

    <div class="col-md-11">

      <a target="_blank" href="#"><h4 align="center">Click me.</h4></a>

    </div>

    <div class="col-md-1">

      <span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>


      <div id="collapse" class="collapse">
        <p style="margin-top: 75px;" align="center"></p>

      </div>

Answer №2

An easy way to implement toggleClass in jQuery.

$( ".jumbotron" ).click(function() {
  $( ".glyphicon" ).toggleClass( glyphicon-chevron-down, glyphicon-chevron-up );
});

Answer №3

Below are the collapse events:

  1. show.bs.collapse - Triggered immediately when the show method is called.
  2. shown.bs.collapse - Fired when a collapse element becomes visible to the user (waits for CSS transitions to finish).

  3. hide.bs.collapse - Triggered immediately after the hide method is called.

  4. hidden.bs.collapse - Fired when a collapse element is hidden from the user (waits for CSS transitions to complete).

$('#collapse').on('hidden.bs.collapse', function () {
  $(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('shown.bs.collapse', function () {
  $(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
  <div class="row">

    <div class="col-md-11">

      <a target="_blank" href="#"><h4 align="center">Click me.</h4></a>

    </div>

    <div class="col-md-1">

      <span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>


      <div id="collapse" class="collapse">
        <p style="margin-top: 75px;" align="center"></p>

      </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes variations in layouts when using the same CSS grid code across different pages?

I've encountered an issue where the CSS on two pages, with slight color changes, is behaving differently in terms of grid layout. Despite multiple attempts to troubleshoot by adjusting items, grid-template-layout, and other parameters, the issue persi ...

htmlcsscss-grid

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6

Enable only the link-text to be clicked when hovering

I'm currently experimenting with creating a link for an h1 title that transforms when hovered over. It's working perfectly fine, but I'm facing an issue - if I place the /a tag outside of the h1 element, the entire element becomes clickable ...

htmlcss

Updating the text of GridView headers

In order to meet the requirements, the grid should have AutoGenerateColumns = true with no use of TemplateField. Only manipulation of the .cs file is allowed. Key requirements include: The grid should be autogenerated Sorting and paging features are perm ...

c#javascriptasp.net.netgridview

The fixed position element appears to be failing to stay fixed in Google Chrome

Something strange is happening with a fixed position element in Chrome. It is still scrolling with the page even though it should be fixed. To better understand the issue, you can view it on the live site In Firefox and even IE, the "Block 1 Block 2 Block ...

javascripthtmlcss

Unable to access the inner object using key-value pair in Angular when working with Firebase

Within my json object, there is an inner object labeled data, containing {count: 9, message: "9 sites synced"} as its contents - also in json format. My objective is to extract the value from message, rather than count. Provided below is the temp ...

javascriptangularfirebasekey-value

Ensure that the Observable is properly declared for the item list

.html // based on the error message, the issue seems to be in the HTML code <ion-card *ngFor="let invitedEvent of invitedEvents"> <ion-card-content> <img [src]="eventPhotoUrl$[invitedEvent.id] | async"> </ion ...

javascriptangulartypescriptrxjsionic4

Ways to customize a bot's status based on the time of day

I'm currently working on enhancing my discord bot by having its status change every hour for a more dynamic user experience. However, I'm facing challenges with JavaScript dates. Can anyone provide some guidance? Below is the snippet of code I ha ...

javascriptnode.jsnpmdiscord.js

Converting Roman Numerals into Decimal Numbers using JavaScript Algorithm

I am eager to develop a Javascript Algorithm that can convert Roman numerals to Arabic using the provided methods below. Array.prototype.splice() Array.prototype.indexOf() Array.prototype.join() I have managed to find an algorithm that accomplishes this ...

javascriptarraysalgorithm

Issue with IntersectionObserver not detecting intersection when the root element is specified

I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection betwee ...

javascripthtmlcssvue.jsintersection-observer

Exploring simpleML's capability to delve deeper into the depths of the page source

I've been able to successfully extract the username babesmcphee from reading this site using simpleML in processing. However, I'm facing an issue with retrieving the second username (JohnCMayer) and subsequent ones. I suspect the problem lies in ...

javahtmlprocessing

Issues with navigating jQuery UI links while offline in Google abound

Hello, I am a newcomer to jQuery and I am facing an issue with my code. I added the <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> but for some reason, my jQuery is not working. I have tried searching ...

javascriptjqueryajax

Adding a marker to Google Maps in React that displays the user's current location

I successfully integrated Google Maps into my website and now I want to add a marker for the user's location. The first file is Map.js, and the second one is MapContainer.js. In MapContainer.js, I have all the necessary data for map rendering, includi ...

javascriptreactjs

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?

I am facing an issue with the modal implementation on my bootstrap website. The modal is supposed to open when a user clicks a button. Strangely, it was working perfectly fine on another HTML/CSS file, but once I added it to this Bootstrap file, it stopped ...

htmlcssbootstrap-4

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

htmlcss

I am attempting to center an image on a webpage while disregarding the margins set on the

Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...

ioscsswebkitblockcentering

The TablePagination component from Material Ui is not functioning properly with my specific array of objects

My TablePagination is not updating the rows on each page of my table and not even limiting the rows with the row filter. I suspect this may be due to the way I'm building the table using an array mapping like this: 0: [name: Robert, age: 15, ...

javascriptreactjsmaterial-ui

Striving to create a responsive fixed sidebar using HTML and CSS

My HTML page has a left side vertical navbar with a fixed position, so it stays in place when I scroll down the other div containing a guide with text. I'm facing issues with making it responsive due to its fixed position. Is there a workaround for th ...

css

The response from the $.ajax call encounters an issue with the content-Type being set to application/json when the content is

Having a bit of trouble with the response content type. Here's the jQuery ajax request code I'm using: var settings = { dataType: 'json', url: 'services/loadTemplate.ashx', data: JSON.stringif ...

javascriptjqueryajaxjsonhttphandler

Mastering the art of utilizing onClick events in conjunction with EJS techniques for

Trying to implement a modal window triggered by an onClick event This is the onClick implementation: <div class = "post-content"> <a onClick = "<% show() %>"> <h6><center> <%= imageData[0].title%></center> < ...

javascriptnode.jsexpressonclickejs