I'm trying to make a click event to change my element style.
I'm using Bootstrap and Angular.
This is the panel, It does show all the groups I have in DB as it should.
<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
And after clicking on it, I do get a few of all the group members as it should.
But how can I change the group style?
I tryed panel-click:
.panel-click:active{
padding: 20px;
box-shadow: 0 0 14px 5px #31b0d5;
}
But I guess I don't understand css functions...
Also tried to get element by ID, but every time I send ID to ng-click function the function get stuck and don't work...
Please help!
you can use
ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}"
like;
<div class="col-sm-6 panel-group panel-hover" ng-repeat="y in allGroups" ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
and then you can use "active" class
.active{/* do something */}
<div class="col-sm-6 panel-group" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)">
<div class="panel panel-default" ng-class="{'active-panel': y.id == selectedPanel}">
<div class="panel-heading">
<h4 class="panel-title">
<p><bold>{{y.GroupName}}</bold></p>
</h4>
</div>
<div class="panel">
<div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
<!-- <div class="panel-footer">Panel Footer</div> -->
</div>
</div>
</div>
you can add in your controller something like that :
function showGroupsMembersList(id){
// your code
// and then add
$scope.selectedPanel = id;
}
in your css now
.active-panel{
padding: 20px !important;
box-shadow: 0 0 14px 5px #31b0d5 !important;
}
Use ng-class. Suppose you want to change the background color of the panel based on click.
In your html: add ng-class active, and ng-click function: setSelectedY
<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups" ng-click="showGroupsMembersList(y.GroupId); setSelectedY(y._id)" ng-class="{active: y._id === idSelectedY}">
Rest of your code here<
/div>
In your controller,
// set default selected Y to null
$scope.idSelectedY = null;
// switch selected Y to active element
$scope.setSelectedY = function (idSelectedY) {
$scope.idSelectedY = idSelectedY;
};
In your css file
.active {background-color: #ccc}
These code lines should work!
Related
Does anybody know how saving panel positions (in localStorage) works with LobiPanel's stateful option in Bootstrap?
The documentation says one must use the stateful option in order to save the position among it's siblings and it will apply them when you reload the browser.
Unfortunately when I do a reload on my site, the panel positions are always back to it's initial state.
It doesn't work, even though LobiPanel successfully adds parent keys and values to the Local Storage, e.g.:
lobipanel_parent_BKlPfuXKuW:"{"panel-2":0,"panel-3":1,"panel-1":2}"
lobipanel_parent_KyCQKms0ir:"{"panel-1":0,"panel-2":1,"panel-3":2}"
lobipanel_parent_lDSURxUHh2:"{"LwmEvZSUiF":0,"vpT9FMcurP":1,"awfVUjhLzE":2}"
lobipanel_parent_lk5lsV9Y3k:"{"panel-6":0,"panel-5":1,"panel-4":2}"
So the positions are actually saved to Local Storage but are somehow not applied when reloading.
This is how my HTML code (Bootstrap v3.3.5) looks like:
<div id="lobipanel-multiple lobipanel">
<h3>Multiple panels with drag & drop</h3>
<p>Drag panels by clicking on the headers</p>
<div class="bs-example">
<div class="row">
<div class="col-md-6 panel">
<div class="panel panel-default" data-index="0" data-inner-id="panel-1">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 1</h4>
</div>
</div>
<div class="panel-body">
Panel body 1
</div>
</div>
<div class="panel panel-warning" data-index="1" data-inner-id="panel-2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 2</h4>
</div>
</div>
<div class="panel-body">
Panel body 2
</div>
</div>
<div class="panel panel-danger" data-index="2" data-inner-id="panel-3">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 3</h4>
</div>
</div>
<div class="panel-body">
Panel body 3
</div>
</div>
</div>
<div class="col-md-6 panel">
<div class="panel panel-success" data-index="3" data-inner-id="panel-4">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 4</h4>
</div>
</div>
<div class="panel-body">
Panel body 4
</div>
</div>
<div class="panel panel-info" data-index="4" data-inner-id="panel-5">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 5</h4>
</div>
</div>
<div class="panel-body">
Panel body 5
</div>
</div>
<div class="panel panel-danger" data-index="5" data-inner-id="panel-6">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 6</h4>
</div>
</div>
<div class="panel-body">
Panel body 6
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('.panel').lobiPanel({
sortable: true,
stateful: true
});
});
</script>
In the documentation there is example code for the stateful function but only for a single panel and not positions. So I still don't know how to address the CSS properly.
<!-- Stateful -->
<div>
<h3>Stateful. <small>Saves its state in localStorage</small></h3>
<div class="bs-example">
<div id="lobipanel-stateful" class="panel panel-default" data-inner-id="lobipanel-stateful">
<div class="panel-heading">
<div class="panel-title">
Panel title
</div>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#lobipanel-stateful').lobiPanel({
stateful: true
});
});
</script>
Thank you in advance.
i'm trying to make sure that each time when new collapse is create it will open only the one that were chosen. right now it just open all when click and close all at the same time
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
div class="panel-group" ng-click="expand()">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
$scope.expand = function(){
$(".collapse").collapse('toggle');
};
$scope.getNumber = function(num) {
console.log(num);
return new Array(parseInt(num.quantity));
};
it create an 3 new collapse but i don know how to make sure it only open the were chosen.
i have try using index it but did not work since my array consist of two object that has the same index
this is my array
[{"type":"men junior", "quantity":"3"},{"type":"men senior", "quantity":"3"}]
Using pure Js to change HTML behaviour into an angular Project is never a good idea.
Have a look at this project for an angular implementation of your collapse : http://embed.plnkr.co/tcTZlA/
The idea is to have a variable that stores a boolean to activate or not your accordeon menu.
In your case ; I'd change your code with :
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
<div class="panel-group" ng-click="j.active = !j.active" ng-class="{'expandcollapse-heading-collapsed': j.active, 'expandcollapse-heading-expanded': !j.active}"> // CODE EDITED HERE WITH A NEW VARIABLE
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
And of course adding some CSS for the transition :
.expandcollapse-item {
overflow: hidden;
border-top:1px solid blue;
}
.expandcollapse-heading-collapsed {
cursor: pointer;
padding: 15px 20px;
position: relative;
z-index: 100000000;
color: black;
background-color: white;
}
.expandcollapse-item:first-of-type {
border-top:0px;
}
.expandcollapse-heading-collapsed h4{
font-size: 16px;
font-weight: normal;
margin:0px;
}
So in this you can make use of $event to add target and specify the inner collapse class. $event will trace the event where it is called like this in javascript. and you can take this event to handle manipulation in your function.
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
<div class="panel-group" ng-click="expand($event)">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
$scope.expand = function($event){
$($event.target).find('.collapse').collapse('toggle');
};
updated solution:
$scope.expand = function($event){
if($($event.target).find('.collapse').hasClass('in')){
$($event.target).find('.collapse').removeClass('in')
}else{
$($event.target).find('.collapse').addClass('in')
}
};
I have a web page with Bootstrap 3. In this web page, I have a row. In that row, I always want to show three items. However, I really have 10 items.
When a user clicks the "remove" button, I want to remove an item, and make the next one slide in. However, I have been unable to figure out how to do this within the context of a Bootstrap row. Currently, my items are laid out like this:
<div class="row">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>
To manage the state of the items, I have the following JavaScript:
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(1, 1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(2, 1);
}
The problem is, I can't get the items to slide to the left when an item is removed. In addition, the items wrap instead of just being hidden beyond the first row. I've created a Fiddle here to show the code running.
Add the parent() method to hide the whole Bootstrap column
$(panelId).parent().fadeOut({
duration:500
});
Demo 1
To get the extra pseudo-rows of items to be hidden, you'll probably have to set a max-height and hide overflow on the parent row:
.row.some-class {
max-height: 110px;
overflow: hidden;
}
Demo 2
The drawback here is that you'd have to have items that never change height, and you'll have to use media queries to account for cases where heights change due to text wrapping, etc. You might be better off using one of the many jQuery sliders instead.
You need to fadeOut a parent() as mantioned in the other answer. Also you need to add one more wrapping <div class="frm"> for horizontal scrolling of aligned boxes. This div dedicated to being as wide as set of boxes aligned horisontally. I repalced fadeOut with hide - it looks much better.
there are additional css attributes for .row:
.row {
overflow:hidden;
height: auto;
}
Here is snippet
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$(".frm").width($(".row").width()*visiblePanels.length/2.5);
$(".frm > div").width($(".row").width()/3.4);
$(window).resize(function(){
$(".frm > div").width($(".row").width()/3.4);});
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(1,1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(2,1);
}
.row {
overflow:hidden;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="frm">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
I have a basic HTML using bootstrap, container > row > col > div ID > panel in that order, the class is placed in div ID, the thing is that I need to remove that class from that DIV and put it in another DIV(the one you click on), I know how to check if the class exist in any div inside of a div but I don't know how to delete it from there and add it to another.
I have made a Fiddle to illustrate this question. When you load the page, the class is already there. If you click any of the boxes it will alert you that in fact the class exist but don't know which div has it. The idea is to remove the class from whaveter that might be and add it to the div you click.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
JS
$("#s1").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s2").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s3").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s4").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
You can reduce your code to:
$("#s1,#s2,#s3,#s4").click(function () {
$(".selection").removeClass('selection');
$(this).addClass('selection');
});
jsFiddle example
In your example:
$(".selection")[0].removeClass('.selection'); doesn't need [0] and there should be no period in the class you pass to removeClass()
You reference the div you click on with $(this)
As long as the selection class exists somewhere, if($(".selection")[0]) { will always be true, so it didn't really make sense to use that as a condition.
Here is a way to achieve what you required . What i have done with your code is
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1" class="divs">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection divs">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3" class="divs">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4" class="divs">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
CSS
.container {
max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
border: 1px solid black;
cursor: pointer;
}
.selection {
background-color: black;
padding:15px;
}
JQUERY
$(document).ready(function(){
$(".panel").on("click",function(){
var divid="#"+$(this).parent().attr("id");
$(".divs").removeClass("selection");
$(divid).addClass("selection");
});
});
Note that i have just added a simple class as "divs" to each of the parent div of the panel.
What i have done here is i have first got the id of the parent div of the panel which has been clicked by the user . Then i have removed the class "selection" from the parent divs "s1 s2 s3 s4" accessing it with the help of the common class "divs" . then i have added the class "selection" to the div which has been clicked.
Here is the DEMO for your reference.
NOTE: This code will work for any number of panels you create.
do it like this:
$("#s1").click(function() {
// Check class on the clicked section
if($(this).hasClass('selection') ) {
alert('Class exist');
// class found then remove it.
$(this).removeClass('.selection');
}
});
Take a look on these to know more: .hasClass(), .addClass(), .removeClass()