Create a gist now

Instantly share code, notes, and snippets.

@leafred /panel.js
Last active Aug 29, 2015

What would you like to do?
Toggle to close and open div with Jquery
/*
* Jquery Panel
* http://www.netspec.com.au/download/panel/
*
* Copyright (c) 2014 Netspec Australia
* Licensed under the MIT license.
*/
(function($){
$.fn.show_panel = function(options){
var setting = $.extend({
class_index:"",
save_state:"1"
},options );
var open_class = 'panel_open'+setting.class_index;
var close_class = 'panel_close'+setting.class_index;
this.click(function(){
var ele = $(this);
var id = ele.attr("id");
if(ele.hasClass(open_class)){
ele.addClass(close_class).removeClass(open_class);
ele.parent().next().slideDown(300);
}
else if(ele.hasClass(close_class)){
ele.addClass(open_class).removeClass(close_class);
ele.parent().next().slideUp(300);
}
if(id==undefined)
return;
if(setting.save_state=="1"){
if(window.localStorage){
var new_val = '';
if(ele.hasClass(open_class)){
new_val = '0';
}
else{
new_val = '1';
}
if(localStorage.show_panel){
var str = localStorage.getItem('show_panel');
str = unescape(str);
var obj = $.parseJSON(str);
var new_item = true;
$.each(obj,function(k,obj2){
$.each(obj2,function(){
if(obj2['id']==id){
new_item = false;
obj2['v'] = new_val;
obj[k] = obj2;
}
});
});
if(new_item){
var arr = {};
arr["id"] = id;
arr["v"] = new_val;
arr["ci"] = setting.class_index;
obj.push(arr);
}
try{
localStorage.setItem('show_panel',JSON.stringify(obj));
}
catch(err){}
}
else{
try{
var jason_new = '[{"id":"'+id+'","v":"'+new_val+'","ci":"'+setting.class_index+'"}]';
localStorage.setItem('show_panel',jason_new);
}
catch(err){}
}
}
}
});
}
}(jQuery))
function panel_display(){
if(window.localStorage){
if(localStorage.show_panel){
var show_panel = localStorage.getItem('show_panel');
show_panel = unescape(show_panel);
var obj = $.parseJSON(show_panel);
var all_open = true;
$.each(obj,function(k,obj2){
$.each(obj2,function(){
var ele = $("#"+obj2['id']);
var class_open = 'panel_open'+obj2["ci"];
var class_close = 'panel_close'+obj2["ci"];
if(obj2['v']=="0"){
ele.removeClass(class_close).addClass(class_open);
ele.parent().next().hide();
all_open = false;
}
else if(obj2['v']=="1"){
ele.removeClass(class_open).addClass(class_close);
ele.parent().next().show();
}
});
});
if(all_open)
localStorage.removeItem('show_panel');
}
}
}
if(window.addEventListener){
window.addEventListener('load',panel_display,false);
}
else if(window.attachEvent){
window.attachEvent("load",panel_display);
}
<!doctype html>
<htm>
<head>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Jquery panel - netspec</title>
<meta name="description" content="Jquery panel live demo" />
<meta name="keywords" content="Jquery,web design" />
<script type="text/javascript" src="panel.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function (){
$(".h_trigger0").show_panel();
$(".h_trigger1").show_panel({save_state:0});
$(".h_trigger2").show_panel({class_index:2});
});
</script>
<style>
.p1{width:50%;border:#CCC 1px solid;margin-bottom:8px;background-color:#f3f3f3;padding:5px}
</style>
</head>
<body>
<div class="p1">
<div class="p1_c">
<h3><div id="panel1" class="h_trigger0 panel_close">Hot forum topics</div></h3>
<div>
This is a panel with id panel1, click the arrow on the top right hand side to close or open<br/>
this panel uses default setting.
</div>
</div>
</div>
<div class="p1">
<div class="p1_c">
<h3><div id="panel2" class="h_trigger1 panel_close">Netspec shopping cart</div></h3>
<div class="content_c">
This is a panel with id panel2, click the arrow on the top right hand side to close or open<br/>
This panel has its own setting for save state, the value 0 means the close or open state is not saved.
</div>
</div>
</div>
<div class="p1">
<div class="p1_c">
<h3><div id="panel3" class="h_trigger2 panel_close2">Netspec shopping cart</div></h3>
<div class="content_c">
This is a panel with id panel2, click the arrow on the top right hand side to close or open<br/>
This panel has different style, the class_index is set to 2, so the css class panel_close2 and panel_open2 are used.
</div>
</div>
</div>
</body>
</html>
.h_trigger0,.h_trigger1{cursor:pointer;width:100%;height:36px;}
.panel_close{background:url(http://www.netspec.com.au/library/panel/src/images/close-open.png) 94% -36px no-repeat;}
.panel_open{background:url(http://www.netspec.com.au/library/panel/src/images/close-open.png) 94% 0px no-repeat;}
.h_trigger2{cursor:pointer;width:100%;height:30px;}
.panel_close2{background:url(http://www.netspec.com.au/library/panel/src/images/close-open2.png) 94% -30px no-repeat;}
.panel_open2{background:url(http://www.netspec.com.au/library/panel/src/images/close-open2.png) 94% 0px no-repeat;}
Owner

leafred commented Feb 4, 2014

Features

Light weight Jquery plug-in
Easy to setup
Support multiple panels with different styles in one page
Optional to save state

Install steps

put js and css file inside head
give id and class to the panel

Owner

leafred commented Feb 4, 2014

It is great to use in mobile web as a side menu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment