Panel

by Eric Miller

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="ctl00_body_ForumPanel_WemForumPanel" class="forum-panel panel panel-5cc1df44">
		<div class="panel-heading" data-toggle="collapse" data-target=".panel-5cc1df44-body">
		  <i class="icon icon-comments icon-lg "></i>
          <h2 class="panel-title">Comments/eNotices</h2>
          <a class="action-toggle no-text" href="#" onclick="return false"><i class="icon icon-arrow-down "></i>hide</a>
          
          <div class="actions-wrapper">		
        <button type="button" name="ctl00$body$ForumPanel$WemForumPanel$AddCommentButton" value="Comment" id="ctl00_body_ForumPanel_WemForumPanel_AddCommentButton" class="action-add-comment btn icon icon-add">Comment</button>
        <button type="button" name="ctl00$body$ForumPanel$WemForumPanel$AddENoticeButton" value="eNotice" id="ctl00_body_ForumPanel_WemForumPanel_AddENoticeButton" class="action-add-enotice btn icon icon-add">eNotice</button>
          </div>
		</div>
        <div class="panel-body panel-5cc1df44-body in">
          <p>Foo</p>
        </div>
</div>

CSS

.panel {background-color:#f5f5f5;}
.panel-heading{background-color:#F5c43A;}

JavaScript

var Panel = function (obj, params) {
        var $panel, $header, $toggle, $toggleIcon, $content,
            params = params || {
                showText: 'show',
                hideText: 'hide',
                animationSpeed: 'slow',
                collapsedclass: 'is-collapsed'
            },

            init = function (obj) {
                $panel = $(obj);
                $header = $panel.children('.panel-heading');
                $toggleIcon = $header.find('a.action-toggle i.icon');

                $header
                    .on('click', function () {
                        $toggleIcon.toggleClass('icon-arrow-right').toggleClass('icon-arrow-down');
                    })
                    .on('click', 'button', function (event) {
                        event.stopPropagation();
                    })
                ;

                return $panel;
            }
        ;

        return init(obj);
    };

    $.fn.panel = function () {
        $(this).each(function () {
            Panel(this);
        });
        return this;
    };


$(function(){
  $('.panel').panel();
})