Panel-Collapse start closed

Asked

Viewed 1,477 times

1

I have the following code: https://jsfiddle.net/05913dg4/1/

I need to get this collapse, get closed. That is, when opening the page it get closed, and only after clicking it open....

jquery twitter-bootstrap

  • As your example, leave the class panel-collapsed along with your class panel-body that in thesis it has to open closed

  • How? Could edit the fiddle js and post?

  • actually, @Paulo’s reply is correct, could post the js fiddle with its buttons?

  • I’ve already posted and updated the code. Check js fiddle. I’m using bootstrap and fontawesome. Maybe jsfiddle isn’t reading.

  • I found that fiddle in Google, has what you need.

2 answers

2


Just set up the HTML as if it were "collapsed", that is to say.

  • In the Heading you will add the class panel-collapsed;
  • Place the icon corresponding to the state colapsed, fa-angle-down I imagine;
  • Add the property display: none; the class .panel-body.

$(document).on('click', '.panel-heading', function(e){
    var $this = $(this);
	if(!$this.hasClass('panel-collapsed')) {
		$this.parents('.panel').find('.panel-body').slideUp();
		$this.addClass('panel-collapsed');
        
		$this.find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down');
	} else {
		$this.parents('.panel').find('.panel-body').slideDown();
		$this.removeClass('panel-collapsed');
        
		$this.find('i').removeClass('fa fa-angle-down').addClass('fa fa-angle-up');
	}
});
.panel-heading {
    background-color: #6f5499;
}

.panel-body {
    background: #f5f5f5;
    padding: 25px;
    display: none;
}
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-primary">
    
    <div class="panel-heading panel-collapsed">
       <h3 class="panel-title" style="padding: 15px;"><center> COMO CHEGAR?</center></h3>
       <span class="pull-right clickable"><i class="fa fa-angle-down"></i></span>
    </div>
    
    <div class="panel-body" style="padding:0;">
        <p>content virá aqui....</p>                 
                                         
    </div>
    
</div>

Fiddle

  • Show! My only problem is that I’m using this to load a maps from google. Then when I click to open, the maps come bugged. It’s probably something to do with his DOM shipment.

1

Just add up display: none; to the CSS:

.panel-body {
    background: #f5f5f5;
    padding: 25px;
    display: none;
}

  • Paul, if I do it this way my icons won’t work. I need up and down to track my actions by js. When opening and viewing, the icon is up the arrow, when clicking it opens the panel and the icon is up, and so on.

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.