Merge multiple list groups into one with a single active selection using Bootstrap List group functionality

Currently, I am experimenting with merging Bootstrap's accordion and list group with JS behavior. My goal is to create a set of list groups where only one option can be active at a time within each accordion.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <div class="accordion col-4" id="accordionVentures">
        <div class="card">
          <div class="card-header" id="heading1000">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000"> 
            Baauw
            </button>
          </div>

          <div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
            <div class="card-body">
              <div class="list-group"  id="list-tab1000" role="tablist">
                  <a class="list-group-item list-group-item-action" id ="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen"  role="tab" data-toggle="list">Vlaardingen</a>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="heading2000">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000"
                    aria-expanded="true" aria-controls="collapse2000" >
              Blauwhoff
            </button>
          </div>

          <div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
            <div class="card-body">

              <div class="list-group"  id="list-tab2000" role="tablist">
                  <a class="list-group-item list-group-item-action" id ="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div>
      <div class="tab-content" id="nav-tabContent1000">
          <div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
      </div>
      <div class="tab-content" id="nav-tabContent2000">
          <div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
      </div>
    </div>

Here is the jsfiddle link demonstrating proper bootstrap interpretation

UPDATE: The current situation is illustrated below:

Step 1. One of the buttons pressed

https://i.sstatic.net/5riHA.png

Step 2. Moving to another accordion and pressing an additional button

https://i.sstatic.net/4BY8i.png

I anticipate that only one option should be active in this scenario:

https://i.sstatic.net/Hsj3V.png

javascriptjquerycssbootstrap-4

Answer №1

Your implementation was good, but you missed adding data-toggle="list" to the Aalsmeer button. I have included a few more buttons to enhance the effect and make it clearer.

To achieve this, you need to remove the classes active show from all elements with the class .list-group-item using jQuery.

$(".list-group-item").on('click', function() {
  $(".list-group-item").each(function(index) {
    $(this).removeClass("active show");
  });
})


$(".list-group-item").on('click', function() {
  $(".list-group-item").each(function(index) {
    $(this).removeClass("active show");
  });
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="accordion col-4" id="accordionVentures">
  <div class="card">
    <div class="card-header" id="heading1000">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000"> 
            Baauw
            </button>
    </div>

    <div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
      <div class="card-body">
        <div class="list-group" id="list-tab1000" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen" role="tab" data-toggle="list">Vlaardingen</a>
          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading2000">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000" aria-expanded="true" aria-controls="collapse2000">
        Blauwhoff
      </button>
    </div>

    <div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
      <div class="card-body">

        <div class="list-group" id="list-tab2000" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
          <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <div class="tab-content" id="nav-tabContent1000">
    <div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
    <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Messages</div>
    <div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
    <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Profile</div>
    <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Settings</div>

  </div>
  <div class="tab-content" id="nav-tabContent2000">

  </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

Struggling to get the day view tab working in Bootstrap Full Calendar

I'm having an issue with my calendar where it's not displaying events from the start time to the end time in the day section, but rather showing them for the full day only. I'm new here and would appreciate any help on this matter. Thank yo ...

phpcodeigniterbootstrap-4

The data returned by Jquery .ajax is not sufficiently helpful

There's a jQuery script in my file that goes like this: <script type="text/javascript"> $(document).ready(function(e){ $('#myButton').click(function(e){ var formdata = {name: 'Alan', hobby: 'boxing'}; ...

phpjqueryjson

What is the best way to have a variable adjust each time a coin is inserted until it reaches a specific value?

I have developed a unique coin box that recognizes the value of each coin inserted. Users can now pay for a service that costs 2.0 € by inserting coins of various denominations such as 2.0 €, 1.0 €, 0.50 €, 0.20 €, and 0.10 €. In my react-nati ...

javascripttypescriptreact-nativereact-hooks

Ajax Complete adds Jquery two times in a row

I have a simple ajax complete call that is designed to add some text after an ajax load finishes. However, I'm encountering an issue where the information is sometimes displayed multiple times. I suspect there might be something missing in my approach ...

javascriptjqueryajax

Verify and deselect boxes

Can someone help me with checking and unchecking checkboxes? I'm facing a lot of issues with it. You can find my code snippet here: http://jsfiddle.net/N5Swt/: <input type="checkbox" id="checkbox1" /> <span> Check me! </span> // ...

javascriptjquerycheckbox

Creating a 2D Image Display in three.js

I'm facing a challenge with my threejs project. My goal is to have a 2D image appear on the screen when I press a key. I've done some research but haven't been able to find a solution that works for me. The methods I've tried either don ...

javascriptimagethree.js

Tips for creating a filter in React JS using checkboxes

In my current situation, I have a constant that will eventually be replaced with an API. For now, it resembles the future API in the following way: const foo = { {'id':1, 'price':200, 'type':1,}, {'id':2, &apo ...

javascriptreactjs

Is there a way to verify if all the div elements are set to display as none?

If all div elements are set to display:none, I want to display a message saying "No result found" element.each(function(i, el) { if (all elements are set to display:none) { no result found } } <div class="a" data-key="a ...

htmljquery

I'm looking to extract only two specific keys along with their values from an array stored in a PHP session. I want to transfer this data to a hidden input and then

I have a digital shopping cart where I store selected product data as arrays in session memory. Here is an example of what the arrays look like in the session: Array ( [4] => Array ( [name] => Organic Essential Iodine Supplement ...

phpjqueryarraysajaxsession

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

javascriptjqueryhtmlcss

Tips for accessing the value of the range slider in Bootstrap 5 while it is being slid

Is it possible to capture the value from a Bootstrap 5 slider while sliding? I want to continuously receive the value as I move the handle, rather than only getting the final value when I release the handle. Currently, I am using a Bootstrap 5 range slide ...

javascriptjquerysliderbootstrap-5

Using Javascript variables within Django HTML templates

As I develop my Django app, I find myself in uncharted territory with JavaScript. My goal is to integrate a map into one of my pages by adding a few lines of JavaScript. The JavaScript code includes initializing the map and placing markers based on data s ...

javascriptpythondjango

Wrapping HTML input elements in a div for alignment

I need help aligning the inputs in my form to match the image provided https://i.sstatic.net/AXhlp.png. I attempted to center the div using <center>, but I am unsure how to properly align the elements based on the image reference. <center> ...

htmlcss

Merge the content of a single file with the contents of several other files using Gulp

I'm still getting the hang of Gulp, so I hope this question isn't too basic. My project is pretty complex with multiple files, and thanks to Gulp's magic, I can combine, minify, babel, and more. I've been using Grunt for a long time, so ...

javascriptnode.jsgulp

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

I've created a component named button.tsx, which contains a function that performs specific tasks when the button is clicked. The function this.saveSearch triggers the saveSearch() function. button.tsx {((this.test1) || this.selectedExistingId) && ...

javascripttypescriptjsxstenciljs

Guide to launching a web browser within a Phonegap app with a button click event

We are developing a PhoneGap application using HTML and JavaScript. Our goal is to integrate PayPal's website so that users can make payments with a simple button click event within the app, and then seamlessly return back to the application afterward ...

javascriptandroidhtmliphone

Tips for incorporating AngularJS with dynamically added elements

Essentially, I have a structure similar to this example The formula for every cell in the last column should be: value[i][2] = value[i-1][2] + value[i][0] - value[i][1] I'm currently facing two issues. The first one arises when attempting to progra ...

javascripthtmlangularjsangularjs-scopeappendchild

Storing data collected from a Google form into an Excel spreadsheet

I have created a form using table layout. My goal is to automatically shift the focus to the next input field once the current one reaches its maximum length. I tried implementing this functionality with jQuery, but it only seems to work with inputs and no ...

javascriptjqueryhtmlcssgoogle-forms

Button to save and unsave in IONIC 2

I am looking to implement a save and unsaved icon feature in my list. The idea is that when I click on the icon, it saves the item and changes the icon accordingly. If I click on it again, it should unsave the item and revert the icon back to its original ...

javascriptandroidhtmlangularjsionic2

Is it possible for a JSON array to consist of objects with varying key/value pairs?

Is it possible for a JSON array to contain objects with different key/value pairs? The example provided in this tutorial shows objects within the JSON array having the same key/value pair: { "example": [ { "firstName": " ...

javascriptarraysjson