1

I am using bootstrap collapse to hide and show content on page and I would like to change it a bit. Here is example from Bootply. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-6"> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> <div id="first" class="collapse"> 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 class="col-md-6 col-lg-6"> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> <div id="second" class="collapse"> 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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Let's say that first one is OPEN and second is CLOSED. When I click on second and it opens I would like for first one to CLOSE (and other way around).

Is it possible to do this with javascript/jquery? I am still learning javascript/jquery and have little knowledge, so any help would be appreciated.

Improve this question
5
  • Do you have any attempted code for this? It is possible, for example you could retrieve all elements (i.e the buttons) with a class into an array, loop through the array to hide them, and then show the button clicked. Commented Aug 8, 2016 at 11:51
  • You have the link from bootplay in question. I am using collapse so i didnt use any button class to hide/show content. I don't know how to write a script that would do next: when you click and open FIRST, SECOND one is closing, and if you click and open SECOND first one is closing. If you click and close SECOND they both stay closed. Commented Aug 8, 2016 at 11:59
  • 1
    Hmmm in terms of bootstrap, you are looking for advice creating accordians. I believe this will help you stackoverflow.com/a/19426220/5865284 It includes a small working example you can adapt your work too. Hope this helps! Commented Aug 8, 2016 at 12:22
  • Hmm. This doesn't really help. If i put panels in col's (div) or col's in panels "effect" is lost. Isn't there a way to solve this with some script? Commented Aug 8, 2016 at 16:08
  • As mentioned in the linked post, there is a bug (there may be a fix) which results in the required use of panels. I provided you with a script solution, and a bootstrap solution, I don't see how else I can help you without literally doing the script for you - which is not the purpose of this website. Commented Aug 8, 2016 at 17:57

1 Answer 1

Reset to default
1

Bootstrap accordion without panels

The accordion example requires the use of the panel component. However, similar behavior can be achieved by any blocks.

You can cook up a simple jQuery script using the following ingredients:

  1. show.bs.collapse event:

    This event fires immediately when the show instance method is called.

  2. .collapse('hide') method:

    Hides a collapsible element.

  3. .collapse.in class:

    • .collapse hides the content
    • .collapse.in shows the content

Please check the result: Bootply

$('.collapse').on('show.bs.collapse', function () { $('.collapse.in').collapse('hide'); })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-6"> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button> <div id="first" class="collapse"> 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 class="col-md-6 col-lg-6"> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button> <div id="second" class="collapse"> 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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot Gleb. This is EXACTLY what i was looking for. Pretty simple when you have someone who can explain it. Thanks again!! :) :) :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.