"Any tips on maintaining the blue color of my dropdown link when it is selected as active

I'm struggling to keep the bootstrap accordion dropdown link blue when it's active. I've tried different methods but none seem to work. What am I missing? Here's my code:

    <div class="visible-sm visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
              <h4 class="panel-title">
                Advertise Jobs
              </h4>
         </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
           <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h4 class="panel-title">
                 Source Talent 
                </h4>
            </a>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h1>Reach the Right Candidates</h1>
           <p>Attract and recruit candidates by location, industry, specific skills and/or occupation</p>


        </div>
      </div>
      <div class="panel panel-2">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Recruit Socially
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          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 bird on 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.
        </div>
      </div>

    </div>

JSfiddle demo

htmlcsstwitter-bootstrapaccordion

Answer №1

To customize the appearance of the toggle panel, you can apply a custom class using jQuery.

Firstly,, include this JavaScript code snippet:

jQuery('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('active-panel');
    $(this).parents('.panel-heading').addClass('active-panel');
});

This script will assign the class active-panel to the toggled panel.

Secondly,, update your CSS with the following styling:

.active-panel h4 {
    background-color: #00aff0;
}

These styles will give a blue background color to the clicked panels.

Thirdly,, make a slight modification to your HTML to ensure the desired appearance is maintained when the page loads. Simply add the active-panel class manually to the default panel.

Replace this code:

<div class="panel-heading" role="tab">

With this:

<div class="panel-heading active-panel" role="tab">

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

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

jqueryhtmlcssjquery-mobile

What is the best way to adjust the size of the box while ensuring that the text remains centered inside it

Consider the HTML snippet below: <div class='title'><h2>Title</h2></div> I attempted to adjust the size of the box with the following CSS: .title { display: block; border-radius: 12px; border: 1px solid; } The resultin ...

htmlcss

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

Within my parent component (Game), I am rendering child components (Card) from an array. Additionally, there is a Menu component that triggers a callback to Game in order to change its state. When switching levels (via a button click on the Menu), I want a ...

javascriptcssreactjs

Ensure that the elements are properly arranged inside divs that have been stretched

My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths. The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the ...

cssflexbox

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

I've encountered an issue with the typography component I'm using for my headings. When I publish the website, the headings do not render properly and the styles are not applied correctly. Strangely, everything looks fine during npm run dev, but ...

cssreactjsmaterial-uitypography

Images with fixed positions will be displayed in one div and hidden in all others

I am struggling with integrating multiple images into my webpage in a fixed position. These images should only be visible within their designated divs and scroll along with the content, hiding behind other divs. Unfortunately, I can't seem to locate ...

htmlcss

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

csstwitter-bootstrapwidth

What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence: <ol> <li>Products</li> <li class="active">Customer</li> <li>Payment</li> </ol> On desktop view, it appears a ...

htmlcss

The animations in fontawesome 6.2 are completely ineffective

I've been struggling to make a spinner icon spin on my webpage. I made sure to download the latest version of font awesome and created a simple HTML file to troubleshoot the issue. Take a look at the HTML code below: <!doctype html> <html la ...

htmlcssfont-awesome

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Here is a sample HTML code: <div id="menu-icon"> <div><i class="fa fa-plus fa-lg"></i></div> </div> And this is the corresponding CSS: #menu-icon { height: 45px; width: 45px; background-color: #A3D8D4; ...

htmlcss

Executing PHP Code with an External JavaScript File in an HTML Document

I have a script called initialize_database.js that utilizes JQuery to trigger a PHP script for creating a database and some tables. I made sure the PHP script is working correctly by adding HTML to test it independently, and it performed as expected. Below ...

javascriptphpjqueryhtml

Begin counting starting from 1 all the way up to 24, then feel free

I've developed a counter that increments from 0 to 24, and once it reaches 24: setInterval(function(){DayAndNight()}, 1000); var iState = 12; function DayAndNight() { //console.log('test'); switch(iState) ...

javascriptjqueryhtml

onload function prevents further URL redirection

After submitting the form "View this product," a function is triggered to retrieve the product id from the form data. Although I can successfully obtain the form_data, the page does not redirect as expected. I suspect that my function may not have been pr ...

javascriptjqueryhtmlforms

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

csscss-transitions

Styling with CSS: Utilizing the Float Left Property to Anchor Elements

Currently, I have implemented an anchor element that utilizes a CSS class to replace the text with an image. Despite its unusual nature, the end result is mostly satisfactory. .toolLink a { overflow:hidden; } .toolEdit { float:left; ba ...

css

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

javascriptjqueryhtmlcss

Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...

htmlcsshtml-lists

Different dimensions of the <select> element with the help of Ryan Fait's jQuery design script

New to java and struggling on my own, I am seeking advice on how to customize Ryan Fait's jQuery input styles to accommodate 2 unique types of elements. For the code reference, please visit: While the code is efficient, I am unsure how to create two ...

jquerycssselectinput

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

javascriptcssreactjstypescriptmaterial-ui