Changing the button icon when a bootstrap dropdown is activated

I have a bootstrap dropdown list and I'm looking to modify the icon displayed (icon-deafult) in the button when I open the drop down (to icon-active). Here's the current code:

<div id="Menu" class="dropdown">
  <a class="btn btn-default" id="MyButton" data-toggle="dropdown" role="button">
    <i class="icon-default"></i>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

.icon-default {
  content: url("path/path/cool.svg");
  background-size: cover;
}
.icon-active {
  content: url("path/path/hot.svg");
  background-size: cover;
}

I attempted using .open > .icon-default {...} but it didn't work. Am I on the right track? Is there a method to achieve this without writing new scripts, possibly utilizing existing CSS or bootstrap features?

htmlcsstwitter-bootstrapiconsdropdown

Answer №1

In case your dropdown is assigned the class active upon opening it, simply adjust your selector like this:

.active .icon-custom {
  content: url("newpath/newpath/hot.svg");
}

Answer №2

In Bootstrap, the area-expended attribute is utilized to control dropdown behavior. You can target a closed dropdown using [aria-expanded="false"] and an open dropdown using [aria-expanded="true"] as shown below.

// Styling for closed dropdown
.dropdown > [aria-expanded="false"] > .icon-default {
    content: url("path/path/cool.svg");
}

// Styling for opened dropdown
.dropdown > [aria-expanded="true"] > .icon-default {
    content: url("path/path/hot.svg");
}

Answer №3

This solution did the trick for me

#navbarDropdownMenuLink[aria-expanded="true"]:after{
  content: url("path/path/hot.svg");
}

#navbarDropdownMenuLink[aria-expanded="false"]:after{
  content: url("path/path/cold.svg");
}

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

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Trying to establish the selected date range in an ng-model called dateRange in the following HTML. The input text field displays the selected value correctly, but dateRange remains null. What steps can I take to address this issue? <!DOCTYPE html> ...

jqueryhtmlangularjsangularjs-directivedaterangepicker

How can I target specific screen sizes using JQuery instead of @media queries?

I am currently utilizing @media to define certain CSS styles, however now I require an equivalent check for screen size in JQuery. @media ( min-width: 33em ) { } The goal is to hide a button when the screen size is larger than 33em, and to display it wh ...

jquerycssjquery-mobilescreen-size

Using jQuery to dynamically alter image source based on class modification

I'm facing an issue with my navbar that changes its class when I scroll down. My goal is to switch the img src when this class changes, but despite searching for solutions in other questions, I haven't found a suitable match yet. Currently, I am ...

javascripthtml

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

javascripthtmlcssbutton

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

javascripthtmlinternet-explorermicrosoft-edge

Utilize jQuery to selectively apply functionality to specific class and parent elements

Presented below is a nested list structure: <ul> <li class="topCurrent">One <ul> <li>One-1 <ul> <li>One-1.1 <ul> <li class= ...

jqueryhtmlcss

What is the best way to fetch values from individual buttons using PHP?

<form action="posts-ayarlar.php" method="POST" id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> <table class="table table-striped table-bordered" ...

javascriptphphtml

The `d-flex flex-column` is causing the image within the div to be hidden

The setup looks like this: <div className="d-flex flex-column"> <div> Text </div> <div style={{ backgroundImage: 'url(...)' }}> </div> </div> The URL is functioning correctly. The div element is ...

htmlcssreactjsbootstrap-4flexbox

Displaying a dynamic dropdown menu within a table column using a PHP foreach loop

Currently facing a challenge in constructing a table using HTML and PHP. I've completed the table setup, but now I want to incorporate a dynamic dropdown in one of the columns. However, I'm struggling with combining PHP, HTML, and the necessary F ...

phphtmlfor-loopdropdown

What are the best practices for utilizing the onLeave() function in fullpage.js?

My goal is to make the user scroll through 4 sections. Upon reaching the fourth section, if the user scrolls down again, instead of going to the fifth section, the view should loop back to the first section. (The fifth section only contains the imprint and ...

jqueryhtmlcssfullpage.js

What is the best way to make a vertical line using the CSS code provided in the link?

Check out this cool horizontal line design I found on stackoverflow: Click here for CSS code to create the line I really like the look of the line. Here's how I implemented it on my website: hr.fancy-line { border: 0; height: 5px; } hr ...

javascriptjqueryhtmlcss

Table Structure Misalignment Issue

Below is the code used to align contact details: <html> <body> <table width="900" class="contact-details"> <tr> <td><img src="./images/Mobile.png"></td> <td> <p> ...

htmlcsshtml-table

Dynamic Rendering and Retrieving Component HTML in Angular

Generate the HTML code of a component to open a new tab with an about:blank page. Reason: This method helps avoid creating HTML using string variables, such as: var html = '<div> <h3>My Template</h3> &a ...

htmlangulartypescriptcomponentsangular8

Tips for incorporating border/outline/stroke into SVG elements using CSS

Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like path { border: 3px solid green; } do not seem to work. Is there a way to apply bo ...

csssvgd3.jsborder

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

Cart filled with desired items but no payment necessary

Hey there! I'm currently working on building a static website using HTML and CSS. While I don't have knowledge of Javascript or PHP, I am able to incorporate jQuery into websites by simply copying and pasting the code in the right place. I was w ...

jqueryhtmlcss

CSS for aligning to baseline grid

Update: I am seeking advice on how to align text to a baseline using different font sizes within a div. Despite my efforts, I have not found a satisfactory solution online. It seems impossible to achieve without the use of a Javascript framework or css pre ...

javascripthtmlcss

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Issue with VS2010: CSS intellisense failing to display id or class names

Is it possible for intellisense to activate when typing a # or . in a CSS file, displaying a list of the class/id names? I currently receive intellisense within the curly brackets, but not for the classes and ids themselves. How can I achieve this functi ...

asp.netcssvisual-studio-2010intellisense

Tips for navigating an aframe scene on mobile devices

How can I enable scrolling over aframe on mobile devices? I attempted to disable the scene controls but scrolling still doesn't work; the scene keeps interacting instead. ...

htmlaframe