CODEWITHSUNDEEP
jquerytwitter-bootstrap
user2557504
user2557504

Reputation: 215

bootstrap accordion trigger open/close from within

I am trying to close a bootstrap panel from clicking a button nested inside. I know its possible, just cant reach the scope.I have calling the collapse class, I have tried showing and hiding it--any ideas?

$( "#button1" ).click(function() {
//close accordion 1 and open accordon 3
  $("#collapseTwo").collapse();
  $("#collapseThree").CollapseIn();
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a id="button1">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Upvotes: 2

Views: 8753

Answers (3)

Oleksi&#239; Nikonov
Oleksi&#239; Nikonov

Reputation: 5568

I went further into the collapse comparing to the preview answers and found out: here are some more methods inside the collapse event provided in jQuery toggle, show, hide, setTransitioning and dispose. But i have no idea what is it the two last.

enter image description here

User them as the second parameter in the event $(`#id`).collapse('show').

More over i solved much more complex task: I had siblign components which are separated and dont know about each other (two form sets and submit button, see the pic).

enter image description here

I put a custom event trigger in the submit button

    onSubmitHandler = (e) => {
      e.preventDefault();
      $(window).trigger(EVENT_SET_EXPEND_BEFORE_SUBMIT)
...

and added custom event listener to set components to expand them when the button is clicked (to improve user experience)

function (props) {
  function onExpandSet(e) {
    $(`#id`).collapse('show')
  }
  $(window).on(EVENT_SET_EXPEND_BEFORE_SUBMIT, onExpandSet);
}

Upvotes: 0

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You can try this:

$( "#button1" ).click(function() {
  //close accordion 1 and open accordion 3
  $("#collapseOne, #collapseThree").collapse('toggle');
});

Here is the fiddle.

OR 

<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="button1">Learn more.</a>

Here is the fiddle.

Upvotes: 2

gotmilk13531
gotmilk13531

Reputation: 234

Try using this and commenting out your javascript:

    <a id="button1" data-toggle="collapse" data-target="#collapseOne">Learn more.</a>

Upvotes: 0

Related Questions