Guide on concealing and showcasing an icon within a bootstrap collapsible panel using solely CSS

Hey there, I've been working with Bootstrap's collapsible panel feature and I'm trying to get Font Awesome icons (+ / -) to display based on whether the panel is expanded or collapsed.

I'm not too familiar with using CSS for this kind of customization, but I figure there must be a way...

Here's the HTML structure:


            <div class="panel">
                <div class="panel-collapse">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="col-xs-3">
                                <p>
                                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseContent-1" aria-expanded="false" aria-controls="collapseContent">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                        <i class="fa fa-minus" aria-hidden="true"></i>
                                    </button>
                                </p>
                                <div class="collapse" id="collapseContent-1">
                                    <div class="card card-body">
                                        One of the collapsible panels content goes here.
                                    </div>
                                </div>
                            </div>
                            <!-- More collapsible panels go here -->
                        </div>
                    </div>
                </div>
            </div>
htmlcss

Answer №1

If you're looking for a solution, give this a try

https://jsfiddle.net/8acj9for/5/

While it may not be commonly used, it can be quite handy for your specific situation

I've designed 2 buttons - a plus button and a minus button

  • Upon clicking the +, the UI will add the d-node class to hide the +, and remove it from the - to display it
  • Similarly, clicking on the - will hide it by adding the d-node class and show the + by removing the same class

Moreover, I've included .collapse('show') for the + and .collapse('hide') for the - to prevent any unexpected collapsing behavior

You can also review the code snippet provided here:

<section class="disciplines">
  <div class="disciplines-collapsable">
    <div class="row">
      <div class="col-xs-12">
        <div class="col-xs-3">
          <p>
            <button class="btn btn-primary" type="button" onclick="(function() { $('#collapseExample-1').collapse('show'); $('#collapseExample-1-button-plus').addClass('d-none'); $('#collapseExample-1-button-minus').removeClass('d-none'); })()" id="collapseExample-1-button-plus">
              <i class="fa fa-plus" aria-hidden="true"></i>
            </button>
            <button class="btn btn-primary d-none" type="button" onclick="(function() { $('#collapseExample-1').collapse('hide'); $('#collapseExample-1-button-plus').removeClass('d-none'); $('#collapseExample-1-button-minus').addClass('d-none'); })()" id="collapseExample-1-button-minus">
              <i class="fa fa-minus" aria-hidden="true"></i>
            </button>
          </p>
          <div class="collapse" id="collapseExample-1">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
              richardson ad
              squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
              sapiente ea proident.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Experiencing difficulties with incorporating cURL data into MySQL using Simple Dom Parser

Hey there! I'm currently trying to figure out the best way to save my scraped data to a MySQL database. It seems like nothing is getting inserted into the database, and I suspect it might be due to the format of the data I'm passing. Should I con ...

phphtmlmysqljsonsimple-html-dom

How can I apply borders to individual columns within a Bootstrap table without affecting the rows?

My attempted solution involved adding th and tfoot. However, I faced issues with applying borders to only the td elements - border was not being applied at the bottom of the table, and the thickness and color of the borders were inconsistent between column ...

cssbootstrap-5

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

htmlcsscross-browsercss-animations

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

htmlcss

2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names? For Instance: When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names! <a class="type1" href="#">te ...

htmlcss

Apply a red border to any form inputs that contain incorrect information when the submit

How can I add red borders to my form inputs only when they are invalid after submission, without displaying the red borders from the start? Currently, I am using the input:invalid selectors in CSS, but this causes the red borders to appear immediately. I ...

htmlcssformsvue.jsvalidation

JQuery GET brings back unnecessary HTML content

Currently utilizing a PHP cart class and implementing some jQuery to dynamically update a div when users add products. The issue I'm encountering is that upon adding a product, the list of products on the HTML page gets duplicated (see screenshot) ev ...

javascriptphpjqueryhtmlajax

Does the content='text/html; charset=gb2312' html meta tag attribute impact the GET Query String?

Here's the question: When making a standard HTTP Request to a server (non-ajax), does the Query String passed by the GET method to the server get affected by the encoding specified in this meta tag: <meta http-equiv='Content-Type' conte ...

javahtmlhttpcharacter-encodingurl-encoding

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

http://jsfiddle.net/bUjx7/42/ <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'> </script> <script type='text/javascript'> $(document).ready(function () { $('.fieldreplace ...

javascriptjqueryhtmlcss

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work ...

htmlcss

Extract the title of a research paper from the personnel website

I am looking to extract the title and authors of journal articles from the official web pages of all staff members. For example: https://eps.leeds.ac.uk/civil-engineering/staff/581/samuel-adu-amankwah The specific section I need to access is this: https: ...

htmlrweb-scraping

The @media print rule for Angular 16 in the style.css file is not functioning properly

I'm currently working on an Angular component called ViewTask, which has a template that is rendered inside the app component. The app component also consists of a side nav bar. My goal is to only display the content inside the 'print-section&apo ...

htmlcssangularmedia-queries

Is there a way to display a list of dropdown menu options using Selenium with Python?

I am currently attempting to utilize Selenium Python and its PhantomJS function in order to print out all the items from the first drop-down menu on this particular page (). Unfortunately, I keep encountering a No Attribute error message. If anyone could ...

pythonhtmlseleniumselenium-webdriverweb-crawler

Choose all the HTML content that falls within two specific tags

Similar Question: jquery - How to select all content between two tags Let's say there is a sample HTML code as follows: <div> <span> <a>Link</a> </span> <p id="start">Foo</p> <!-- lots of random HTML ...

javascriptjqueryhtml

The pointer-events attribute seems to be inactive and not functioning as expected

I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click ev ...

csshtmlpointer-events

Top Bootstrap dropdown menu overlaid with Leaflet zoom buttons

I'm encountering an issue depicted in the screenshot below. Is this related to bootstrap or leaflet? How can I adjust the position/style of the dropdown menu so that it appears above all other elements? https://i.sstatic.net/cQhN5.png ...

csstwitter-bootstrapleaflet

What are some ways to create a larger-than-life mui button size?

The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...

htmlcssreactjsbuttonmaterial-ui

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

javascripthtmljquerycss

AngularJS: Users must click submit button twice for it to function properly

It's puzzling that I have to click the submit button on my form twice before it triggers the save function below. My HTML is written in Pug format. Below is a snippet of my HTML template: <form ng-submit="save()"> <div class="form-group" ...

javascripthtmlangularjs