A method for automatically collapsing one div item when another is open

I have tried various methods but none seem to work. I am attempting to open only one div at a time, please click on the link above to see for yourself.
Please provide any alternate solutions or suggestions.

JsFiddle: http://jsfiddle.net/gm2k3ewp/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-group row" id="accordion">
    <div>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      <div id="collapse1" class="col-md-3 panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div>
      <div>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      </div>
      <div id="collapse2" class="col-md-3 panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div>
      <div>
        <div class="col-md-3">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><img src="http://via.placeholder.com/350x150"></a>
        </div>
      </div>
      <div id="collapse3" class="col-md-3 panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

Here is the recommended Javascript snippet:

$('#accordion a').click( function(e) {
    $('.collapse').collapse('hide');
});

This code will create an event listener for when links are clicked within the accordion element. It will collapse all items before opening the one that was clicked.

Answer №2

Check out this demo

I included the panel default class in this example.

'http://jsfiddle.net/gm2k3ewp/1/'

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

To close the visible div, simply click outside of it

Although this question has been asked numerous times before, I have yet to come across an answer that suits my specific project needs. Currently, I am in the process of developing a dropdown menu similar to the settings dropdown on Facebook. The menu wor ...

jquerydrop-down-menuvisible

Retrieving complete credit card information with the help of JavaScript

I've been grappling with extracting credit card data from a Desko Keyboard, and while I managed to do so, the challenge lies in the fact that each time I swipe, the card data comes in a different pattern. Here is my JavaScript code: var fs = require ...

javascriptnode.jscredit-cardmagnetic-cards

An asynchronous function does not provide a result

As a beginner in the realm of Javascript, I find myself challenged by a task involving reading multiple files and constructing a JSON object response. While I have managed to execute most of the code successfully, I am stuck at the final hurdle - receiving ...

javascriptnode.jsasynchronouspromise

The reason behind the clickable issue with my duplicate <ion-select>

I've been working on a form using HTML, CSS, and JavaScript where I implemented an "Add" button to duplicate the form. The issue arises with the ion-select element within the duplicated form. While the original form displays all predefined options upo ...

javascripthtmltypescriptionic-framework

Having trouble with TypeScript Library/SDK after installing my custom package, as the types are not being recognized

I have created my own typescript library using the typescript-starter tool found at . Here is how I structured the types folder: https://i.stack.imgur.com/igAuj.png After installing this package, I attempted a function or service call as depicted in the ...

javascripttypescriptnpm

Disabling a specific dropdown within ng-repeat in AngularJS

I've encountered a problem with the ng-repeat in my HTML code: <div ng-repeat="a in items"> <div> <span>{{a.name}}</span> </div> <div> <select ng-model="a.c_id" ng-options="d.c_id as d.description ...

javascriptangularjs

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

javascripthtmlcss

"Utilizing SVG format to manipulate text, adjusting font size within tspan elements

There seems to be an issue with the font size on SVG. Even though both the SVG and paragraph have a font-size of 16px, they appear different. I would like the font size in the SVG to match that of the paragraph. Another concern is how to center <tspan ...

htmlcsssvg

Retrieve the information from a fetch call and save it for later use

Greetings to the wonderful StackOverFlow community. As a beginner in web development, I have countless questions swirling in my mind. The focal point of my query is regarding a fetch request in JavaScript. I am struggling to extract the data (userId) fr ...

javascriptvue.jsfetchvuexresultset

Tips for properly modifying an attribute within an array of objects in JavaScript using ReactJS

My array of objects looks like this: this.state = { itemSquare: [{ item: "bomb", status: false }, { item: "bomb", status: false }, { item: "bomb", status: false }, { item: "bomb", status: ...

javascriptreactjs

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

htmlcss

How can PHP information be transmitted to an Ajax response?

I stumbled upon this script online that I'm currently using to identify a visitor's web browser details. This script is triggered when I make an ajax request. At the end of the PHP script, there is an array, return array( 'userA ...

javascriptphpjqueryajaxjson

What is Mozilla's reasoning for deeming Conditional catch-blocks as non-conventional?

I recently came across a document on Mozilla that described the try...catch conditional as "non-standard and is not on a standards track. Do not use it in production" However, I am curious to understand the reason behind this statement. I also want t ...

javascriptnode.jsvalidationadonis.js

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered: Below is my code snippet: import { combineReducers, createStore } from 'redux'; import produce from ' ...

javascripttypescriptreduxreact-reduximmer.js

Create a sequence of reactions using Selenium WebDriver

I am looking to gather a set of responses while browsing a website, and then "recreate" the process using those responses. Upon exploring an different discussion, I stumbled upon this method for rendering HTML: content = requests.get("https://stackoverfl ...

javascriptpythonseleniumselenium-webdriver

Solve the issue flagged by JSHint advising against using the 'with' statement

Currently, I am in the process of revamping a script that was initially created back in 2006. The goal is to align it with current best practices and eventually incorporate it into a new side project. To address any coding issues, I rely on resources like ...

jqueryjslintjshint

What is the reason behind TypeScript's decision not to raise an error in case of a mismatched function argument type?

Here's a simple illustration to showcase my point: type Info = { id: number; } type ImportantInfo = { id: number; value: 5; } type Task = (data: Info) => void; const task: Task = data => null; const data: ImportantInfo = { i ...

javascripttypescript

In the setup function, the composition API calculates the return value of the computed property before it is

I am currently working on editing a post using the state manager Vuex in Vue3 with Composition API. Below is the code I have implemented: <template> <div class="container py-5"> <h3 class="mb-5 border-top-0 border-start- ...

javascriptvue.jsvuexvuejs3vue-composition-api

Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...

javascriptjqueryhtmlcss

In Angular Typeahead, the model is used as an identifier and the Text represents the name in the array object

I'm currently utilizing the Angular UI Typeahead directive available at this link. Can someone provide guidance on how to assign a model as an id and display text as a name in it? I have attempted the method below but encountered issues. Any suggestio ...

javascriptangularjstypeahead