When you click on the collapsible header background, the content collapses, but the main icon does not update

I am currently using collapsible content from Bootstrap and I am encountering an issue with the icon not changing when I click on the collapsible-header background. Here is a visual representation of the problem:

1st part (not collapsed)

2nd part (After collapsed)

Upon clicking on the collapsible-header background, the lists collapse but the icon remains unchanged. I would like the icon to change along with the background upon clicking. However, if I click on the icon itself, it changes to a plus sign and collapses the contents as expected.

I want the collapsible header background to be responsive along with the icon. Unfortunately, the provided sample code does not visualize this properly. Please see below for the code snippet:

<div class="col-md-12" style="margin:20px 0 0 0">
    <ul class="collapsible collapsible-landing" data-collapsible="accordion">
        <li>
            <div class="collapsible-header">
                <span class="pull-left"><h3>Categories</h3></span>
                <span class="pull-right">
                    <a href="#catehide1" class="catehide2" id="catehide1"><i class="zmdi zmdi-plus"></i></a>
                    <a href="#cateshow1" class="cateshow2" id="cateshow1"><i class="zmdi zmdi-minus"></i></a>
                </span>
            </div>
            <div class="collapsible-body">
                <ul class="collapsible-list">
                    <li><a href="www.sample1.com">Sample 1</a></li>
                    <li><a href="www.sample1.com">Sample 2</a></li>
                    <li><a href="www.sample1.com">Sample 3</a></li>
                    <li><a href="www.sample1.com">Sample 4</a></li>
                    <li><a href="www.sample1.com">Sample 5</a></li>
                    <li><a href="www.sample1.com">Sample 6</a></li>
                    <li><a href="www.sample1.com">Sample 7</a></li>
                    <li><a href="www.sample1.com">Sample 8</a></li>
                    <li class="clearfix"></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

Here is the CSS section related to this issue:

.catehide2, .cateshow2 {
    float: right;
    font-size: 20px;
    color: #000000;
    text-align: center;
    padding: 0;
}

.catehide2:hover, .cateshow2:hover {
    color: #9e9e9e;
    text-decoration: none;
    opacity: 1;
}

.categorybox1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none;
    height: auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 450;
    font-size: 15px;
    color: #424242;
    border: 0;
}

/* Additional CSS rules... */
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

UPDATED

Solution Using Pure CSS

The issue of icon change when expanding and collapsing the accordion has been fixed.

Feel free to view the example code on CODEPEN

HTML: 

<div class="col-md-12 " style="margin:20px 0 0 0">
  <ul class="collapsible collapsible-landing">
    <li>
      <div class="panel-heading collapsed" data-toggle="collapse" data-target="#test">
        <h3 class="panel-title accordion-toggle">Categories</h3>

      </div>
      <div class="collapsible-body collapsible-body panel-collapse collapse" id="test">
        <ul class="collapsible-list">
          <li> <a href="www.sample1.com"> Sample 1 </a> </li>
          <li> <a href="www.sample1.com"> Sample 2 </a> </li>
          <li> <a href="www.sample1.com"> Sample 3</a> </li>
          <li> <a href="www.sample1.com"> Sample 4</a> </li>
          <li> <a href="www.sample1.com"> Sample 5</a> </li>
          <li> <a href="www.sample1.com"> Sample 6 </a> </li>
          <li> <a href="www.sample1.com">Sample 7</a> </li>
          <li> <a href="www.sample1.com">Sample 8 </a> </li>
          <li class="clearfix"></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

CSS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: auto;
  font-family: 'Roboto', sans-serif;
  font-weight: 450;
  font-size: 15px;
  color: #424242;
  border: 0;
}

.collapsible-landing {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: none;
  margin: 0.5rem 0 1rem 0;
  box-shadow: none;
}

.collapsible-list {
  background: #efefef;
}

.collapsible-list li a {
  width: 25%;
  padding: 10px 24px;
  float: left;
  color: #424242;
}

.collapsible-list li a:hover {
  text-decoration: none;
  border-bottom: none;
  color: #9e9e9e;
}

.collapsible-list li.clearfix {
  clear: both;
  padding: 0 0 20px 0;
}

.accordion-toggle:after {
  /* symbol for "opening" panels */      
  font-family: 'Material-Design-Iconic-Font';
  content: "\f273";
  float: right;
  color: inherit;
}

.panel-heading.collapsed .accordion-toggle:after {
  /* symbol for "collapsed" panels */
  content: "\f278";
}

Answer №2

Incorporating a small jQuery function can easily solve your problem without the need for extensive CSS coding. Give it a try and see if it works for you!

$(function(){
  $('#collapse1').on('hide.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-chevron-down"></span> Show');
  })
  $('#collapse1').on('show.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-chevron-up"></span> Hide');
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <h2>Collapsible Panel</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a id="button" data-toggle="collapse" data-target="#collapse1">
            <span class="glyphicon glyphicon-chevron-down"></span> show
          </a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</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

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

formstwitter-bootstrapcssinput

Is it possible for CSS3 transitions to handle multiple tasks simultaneously? Let's experiment with Fiddle and find out

I am attempting to create a simple effect: The div contains an image and text with a background of RGBA(255,255,255,0.5). Upon hovering over the element, I want the image to decrease opacity and the background behind the text to disappear in a seamless t ...

css

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

cssreactjsmaterial-uistyling

Identifying the Operating System and Applying the Appropriate Stylesheet

I am trying to detect the Windows operating system and assign a specific stylesheet for Windows only. Below is the code snippet I have been using: $(function() { if (navigator.appVersion.indexOf("Win")!=-1) { $(document ...

javascriptjquerycss

Is it possible to customize the arrow on a drop-down menu?

Here is an example of the page I am facing issues with: If you look at the right side of the bottom bar, you will notice a selection option for different themes. I have been attempting to replace the down arrow with an image. Below is the code I have used ...

htmlcss

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

What I am trying to achieve: I am facing issues with getting the desired dynamic form output. The values are not being displayed and the data is not passing from the JavaScript file to the html form. I have even tried using the console, but it doesn' ...

javascriptjqueryhtmlcssangularjs

Issue with uneven spacing on both ends of the screen on mobile devices

I have successfully used a <div style="margin:0 auto; "> tag with the specified property, working perfectly. However, I added another <div> above and set the float as follows: .gallery-div{ background:url(images/gallery-bg.png) repeat-y; ...

htmlcsscss-float

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Whenever I click on a field and move to another one, the span tag turns red. Then, after pressing the submit button, an alert message pops up. However, if I turn the span red, fill in the field, and press the submit button, it shows success even if other f ...

javascripthtmlcss

How can I ensure that buttons in a row utilize the full 100% of available space?

I have a row of buttons in my HTML code like this: HTML : <div class="buttons"> <div><input type="button"/></div> <div><input type="button"/></div> <div><input type="button"/></div& ...

htmlcss

Ways to identify the active anchor within an li element

Below is the code snippet I am currently working with: <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> </li> <li> <a href="<?php echo base_url()?>home/promos/text ...

javascriptjquerycssjquery-mobile

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

Looking to position the Secondary Navigation Bar on squarespace at the bottom of the page, distinct from the primary Navigation Bar

When SALES PAGE becomes the secondary navigation option Instructions for positioning style to Bottom Center I am attempting to place it at the bottom of the navigation bar. Can you provide me with the necessary code or styles in squarespace? When I choose ...

csscustomizationmarginnavigationbarsquarespace

How to create a full-page background image using Bootstrap?

Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...

htmlcsstwitter-bootstrap-3

In CSS, use the p tag to make sure content fills the available space when the browser is resized beyond a certain point

Before I begin, I must clarify that I do not specialize in front-end development and my expertise in UI/UX is limited. With that said, here is my query: I have a div containing p tags. I wish for this div to have a width: 700px when the browser window is ...

htmlcsstagsresize

The text sliding feature gradually moves further away from the left side with each iteration

I am in the process of transferring an existing slider from one website to another. Instead of creating a text slider from scratch, I decided to modify the code I found for the new site. However, the slider is not functioning correctly on the new site. Th ...

javascriptjqueryhtmlcss

Unable to assign a height of 100% to the tr element or a width of 100% to the

While inspecting the elements, I noticed the presence of <tbody>, within which <tr> is nested. The issue arises when the tbody element has 100% height and width as intended, but <tr> always falls short by 4 pixels in height even when styl ...

htmlcss

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Recently, I've been delving into the world of CSS and PHP as I work on converting old code entirely into HTML and PHP with a touch of CSS. The visual aspect seems fine, but I've hit a roadblock with the submit form due to an IF statement in PHP. ...

javascriptphpjqueryhtmlcss

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss