Collapsible panel and dismisable alert in bootstrap

Collapsible panel and dismisable alert in bootstrap 

all you require is to download bootstrap from Here and include it to your html file using link tag. I have included bootstrap-rtl.css and bootstrap.min.js

<script src="~/Scripts/jquery-1.10.2.js"></script> 

<link href="~/Content/bootstrapRTL.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>

Add the following Html to your page .

<div class="row">
    <div class="col-md-6">
        <div class="alert alert-danger alert-dismissable">
            <p><i class="glyphicon glyphicon-info-sign"></i> Error Occured while saving infomramtion <i class="glyphicon glyphicon-remove pull-left clickable"></i></p>
        </div>
    </div>
   
</div>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"><span class="clickable"><i class="glyphicon glyphicon-chevron-up pull-left"></i></span> Title</div>
            </div>
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec pulvinar quam. 
                Nullam finibus vehicula accumsan. Integer id ante ac quam imperdiet iaculis ut sit amet lacus. 
                Proin vestibulum id massa ac tincidunt. Nunc ut urna arcu. Nulla elementum, lacus ut imperdiet 
                pellentesque, ex tortor sollicitudin ligula, ac auctor sem leo at elit. Class aptent taciti sociosqu 
                ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
            </div>
        </div>
    </div>
</div>

Add the following javascript to your page

<script language="javascript">
    $(document).on('click', '.panel-heading span.clickable', 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-chevron-up').addClass('glyphicon-chevron-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        }


    })

    $(document).on('click', '.alert i.clickable', function (e) {
        var $this = $(this);
        $(this).parents('.alert').fadeOut(700);
    });
</script>