Closed JS open panel

Asked

Viewed 190 times

6

I have the following panel:

$(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('glyphicon-menu-up').addClass('glyphicon-menu-down');
    } else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-up');
        $('html, body').animate({scrollTop: $(".btn-modal").offset().top}, 1000);
    }
});

My question is: I can’t get it to start closed (without Collapse), that is, only after clicking it will appear and go down, and when clicking again, it will go back to the closed format. What I do?

jquery panel

  • Could put the HTML of the Panel and, if possible, the part $(document).on('ready', function (){}); of your code?

  • you can’t make a Jsfiddle?

  • You can put a little more code?

2 answers

1

Try putting in the .ready to close all panels

$(document).ready(function() {
    $('.panel-heading').each(function (index) {
        var $this = $(this);
        if(!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('i').removeClass('glyphicon-menu-up').addClass('glyphicon-menu-down');
        }
    });
});

0

Hitch, since you didn’t post the full code, I noticed you’re using the Bootstrap - Collapse

If you need to leave all Collapse closed at the beginning is quite simple, just remove the class in in the div of the content that is visible:

Example: jsfiddle

Browser other questions tagged jquery panel

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