What is the best way to expand all accordions with just one click?

I have two buttons positioned next to each other:

Button-A displays all the headings, while Button-B displays all the headings with descriptions. My goal is to allow the user to click on Button-A and have it switch to Button-B, opening all the accordions in Button-B. Similarly, clicking on Button-B should directly open all the accordion items for Button-B while keeping Button-A's accordions closed.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3b243b3b2e396521380b7a657a796571">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99d87998798">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d5cfd1cfd2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-12 mt-5 tab-accrd">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home2" role="tab" aria-controls="home2" aria-selected="true">Button-A</a>
    </li>
    <li class="nav-item ml-3">
      <a class="nav-link" id="home-tab" data-toggle="tab" href="#home2" role="tab" aria-controls="home2" aria-selected="true">Button-B</a>
    </li>

  </ul>
  <div class="tab-content mt-1" id="myTabContent">
    <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab">
      <div id="accordion" role="tablist" aria-multiselectable="true">

        <!-- Accordion Item 1 -->
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Content goes here...</p>
            </div>
          </div>
        </div>

        <!-- Additional Accordion Items go here... -->


      </div>
    </div>
  </div>
</div>

htmljquerycssbootstrap-4

Answer №1

Toggle the collapse display depending on which button is clicked (e.g. Button-A or Button-B)

//Trigger event after tab is displayed
$('a[data-toggle=tab]').on('shown.bs.tab', function () {
    let element = $(this);
    let tabSelector = element.attr('href');
    $(tabSelector).find('.collapse').collapse(element.text().trim() == 'Button-A' ? 'hide' : 'show');
});

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

Include the title of the page in the printing stylesheet

Is there a way to dynamically insert the page title into the print version of my website using jQuery and CSS? I have a separate print.css file, but I'm wondering if it's possible to grab the title data as a variable in jQuery and then use CSS to ...

jquerycsstitle

Having trouble with the button's functionality in Internet Explorer?

Recently, I encountered an issue with a "dropdown button" that I created using only CSS and HTML. Surprisingly, it works flawlessly in Chrome and FireFox, but seems to have some glitches when tested on Internet Explorer (IE). The "New Invoice" button fails ...

htmlcssinternet-explorerbutton

Fill in the select dropdown menu

I am trying to trigger the population of a select dropdown when the user clicks on it. The issue I am facing is that the click handler seems to be activated only when the user clicks on the options within the select, whereas in my case there are no optio ...

javascriptjquery

Press the "Reveal More" button to expand the content to its full size

I am currently working on coding a "read more" section using a button. I have looked at some existing solutions, but none of them are to my liking. My plan is to create a div that includes all the relevant content. My goal is to have a div at the bottom w ...

javascriptjqueryhtmlcss

Empower the parent container to wrap around its child elements using Flexbox

I am trying to make the flexbox parent item adjust its width based on the children, but currently it is stretching out to full width and leaving empty space on the right side. Here is the CSS code I have tried: .flexParent { display:flex; background:# ...

htmlcssflexbox

Display a dismissible alert using Bootstrap every time a button is clicked with the help of jQuery

As I develop a web application using Asp.net C#, my goal is to display an alert message with each user click. The alerts should appear at the top of the page, with subsequent alerts pushing down previous ones. Each alert should automatically close after 5 ...

jqueryasp.netbootstrap-5

Sending a Json object back to an Ajax request made to a webMethod

I have been working on implementing an Ajax call method and an ASP.NET web method. The ASP.NET function I created is returning some values that I need to handle in the Ajax call. Despite trying various approaches, I have not yet succeeded in achieving th ...

javascriptc#jqueryasp.netajax

Exploring the capabilities of jQuery in conjunction with HttpHandlers

I'm encountering an issue trying to retrieve HTML from a HttpHandler through jQuery. Below is the jQuery script I am using to call the handler: $.get('http://localhost:56964/LoadComments.axd?storyID=' + storyID ,function(data) { alert(data) ...

asp.netjqueryajaxhttphandler

Querying with Codeigniter in Ajax Data table only returns a single row

When using codeigniter to create an ajax data-table, I pass the User ID as a condition to retrieve records from a product orders table. $this->datatables->select('orders.order_user_id,orders.order_date,orders.order_id,orders.order_confirmation_ ...

phpjqueryajaxcodeigniterdatatable

Modify the class of an input while typing using Jquery

Recently, I created a form using Bootstrap 4. The validation process is done through a PHP file with an AJAX call and it's functioning correctly, except for one issue. I want the input class to switch from "invalid" to "valid" as soon as the user begi ...

javascriptphpjqueryajaxbootstrap-4

What is the best way to make one page disappear and replace it with a pop-up from

I am currently encountering an issue with my sign-in and registration pages. I have a pop-up page that includes both the sign-in and register tabs. When clicking on the register tab, the sign-in page is supposed to disappear and the registration page shoul ...

javascriptpythonhtmlcssdjango

Tips for managing Ajax JSON response in a PhoneGap application

Although there are a few posts on this topic, I am struggling to piece together the necessary components to make it work. I am in the process of converting a web application into an app using phonegap and I am attempting to create a search form that retri ...

javascriptjqueryajax

CSS / SCSS: altering child element styles when parent is focused

Is there a way to change the style of child elements when focusing on a parent element without using javascript? For example, let's say we have: <li class="parent"> <div class="child1"></div> <div class="child2"></d ...

htmlcsssass

Display dynamic content on the current PHP page using Ajax

I am currently facing an issue with sending data to the same php page using Ajax. The problem arises when I submit a form through Ajax, from a jQueryUI tab, and try to send the data back to the initially loaded php page in the tab. Below is the code snipp ...

phpjqueryajaxjquery-ui-tabs

The issue with loading pages in jQuery Mobile AJAX is not being resolved

echo '<script> function ' . $row['idname'] . 'Click(){ $( "#flip-' . $row['idname'] . '" ).flipswitch( "disable" ); var isOff = document.getElementById("flip-' . $row['idname& ...

javascriptphpjqueryajax

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

Troubleshooting: Issues with window.location.href and window.open within an iframe

Code Update <div> <button type="button" class="submit btn btn-default" id="btnSubmit">Submit </button> <button type="button">Cancel</button> </div> <script> $("#btnSubmit").click(function(e) { ...

javascriptjqueryangularjsajaxhtml

The focus on the input text in AngularJS functions properly on desktop devices but not on iPads

I am facing an issue with the search input box in my application. Even though the search input opens when I click a button, it is not autofocusing. Here is the snippet of my code: $scope.goSearch = function () { $scope.$broadcast("focusTextInput"); } ...

javascripthtmlangularjs

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)

I'm facing a strange issue while attempting to retrieve a basic JSON object from my controller. Although I can see the JSON returned perfectly fine in Firefox debug tools, when I look at my javascript callback, I receive an undefined in my console.log ...

jqueryajaxjsonasp.net-mvc