Steps for displaying only one collapse at a time using either Bootstrap 3 or Bootstrap 4

As I work on constructing a website from the ground up using Bootstrap 4, I have encountered a roadblock that may be simple for an experienced Bootstrap developer. While I was able to find a solution involving raw Javascript code to collapse one element at a time, I am now wondering how I can achieve the same functionality using Bootstrap 4. Should I stick with my current solution or is there a more efficient way in Bootstrap 4? Any advice or hints would be greatly appreciated, as I have attempted using data-toggle and data-target but seem to be missing something crucial for it to work correctly. Although I am not very fluent in JS syntax, I do have a basic understanding of it. You can view an example here:

HTML:

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

JS:

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("class");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

Answer №1

One way to tackle this issue is to utilize the Bootstrap Accordian feature. You can explore a helpful example at this link.

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

Filtering a string that contains commas using another string that also contains commas

I need help with removing elements from one comma-separated string based on another. String 1: 6,2 String 2: 1,2,4,5,6,7,9,12,13 Is there a function or method that can accomplish this task for me? ...

Transform the size and convert an object from a picture into text based on the user's scrolling

I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...

Can we retrieve the CSS of an element?

Using Selenium's webdriverJS, I have automated tasks on an HTML5 page. To incorporate a CSS selector into a function, I had to rely on XPath for selecting elements: var complexXpath = "//*/div/a"; /* This is just an example */ var element = mydri ...

Node Webkit: No visible content?

Recently, I decided to explore Node-Webkit and encountered an issue. Despite coding the script below, nothing seems to appear on the screen and the file I intended to create remains missing. Even after installing npm for fs and os modules, I still face no ...

Is it possible to implement a Promise.some() function that includes a timeout

Scenario - collect multiple URLs and cache the responses. URLs that are processed quickly (e.g. within 500ms) are included in the current pass, while those that take longer are still cached for use in the next round (approximately 10 minutes later in our a ...

Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

I am currently working on integrating the API breakpoints in my child component. These components are designed for my football web application. The breakpoints are sourced from: api-football My challenge lies in passing multiple prop values into a c ...

Encountering the error message "Function.prototype.bind.apply(...) cannot be invoked as a constructor

I'm attempting to implement Controller Inheritance in AngularJS (1.6.9), but encountering an error in the console: Function.prototype.bind.apply(...) is not a constructor. Here's the snippet from the HTML file: <!-- Controller Inheritance --& ...

Unable to retrieve information from compact JSON files

It's been 2 hours and I still can't figure this out I need help with reading my Json Data in my JavaScript File, saving it to a variable, and then printing it out. I've tried multiple solutions but nothing seems to work (I'm new to ...

Tips for preventing the initiation of a session on a specific Express route?

Currently, I rely on ExpressJS as my app framework and also utilize connect-memcached for managing sessions within Express. app.use( express.session({ secret: "blah blah", store: new MemcachedStore({ ... }) })); This setup has been very effective. Ho ...

refreshing the webpage's content following the completion of an asynchronous request

I am working on an Ionic2 app that utilizes the SideMenu template. On the rootPage, I have the following code: export class HomePage { products: any = []; constructor(public navCtrl: NavController, public navParams: NavParams, private woo: WooCommer ...

Receiving feedback from an Ajax request

When attempting to retrieve the responseText from an AJAX call created in plain JavaScript, there seems to be an issue where Firebug can detect the request but cannot obtain a reference to the responseText. Below is the code for the function: function ge ...

The data is not retrieved in the response

When creating an order, I am encountering an issue where the code is not waiting for the meal data retrieval despite using async and await. This results in my response containing empty data. Although I prefer to use async and await over promises for consi ...

Inconsistency in Firebase data updates

Hey there, my code snippet below is responsible for capturing latitude and longitude values through a drag-and-drop marker. Although the latitude and longitude are continuously updated in the console when I log them, the same doesn't seem to happen wh ...

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

Adjusting the transparency of numerous elements using JavaScript or jQuery

My task involves creating a large form where elements initially have an opacity of 0.5, and when a button is clicked, the opacity changes to 1.0. While I can achieve this using JavaScript, I want to find a more efficient way by avoiding individual if state ...

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seem ...

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

<div id="invite_popup"> </div> $(".invite_button2").click(function(){ var file_id = $(this).data("id"); //alert(file_id); var popup2 ='< ...

Can Ember store in Route handle Post requests?

Is there a way to use ember store functionality similar to this.store.findAll('report') for making POST requests with postObj in my route? Also, how should I handle the response received from these requests? Right now, I am sending ajax POST requ ...

Function for editing a button in an AngularJS single page application

I am a beginner in AngularJS and I'm currently working on a project to create a single page application for tracking expenses. However, I'm facing some challenges with my code. Although I have successfully implemented most of the functions, I am ...