JQuery Slidetoggle() working but not how I need it too
Question
It's kind of hard to explain, but I have these rows, about 22 of them, and when I click a row, a content panel section should slide down and reveal it, and then when I click the row again, it should hide it. At the moment click to reveal works, but if I click the content panel that slides down it slides back up,
I only want it so if i click the row again it slides back up and if i click the content that slid down, nothing to happen, so that people can click links and stuff in it, without it closing.
Here is some of my code. JQUERY:
var main = function() {
$(".article").click(function() {
$('.article').removeClass('current');
$(this).addClass('current');
$(this).children('.description').slideToggle();
});
};
$(document).ready(main);
Heres the HTML, just 1 row, of 22:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="articles container">
<div class="article">
<div class="item row">
<div class="col-md-3">
<p class="source">Content</p>
</div>
<div class="col-md-6">
<p class="title">"Content"</p>
</div>
<div class="col-md-3">
<p class="pubdate">Content</p>
</div>
</div>
<div class="description row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<p>Content</p>
</div>
<div class="col-md-3"> </div>
</div>
</div>
<div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="example.js"></script>
<html>
and here is the accompanying css: not including the bootstrap ones i'm using.
.articles {
margin-top: 10px;
margin-bottom: 10px;
}
.article {
color: white;
background: black;
border-spacing: 10px;
border-color: black;
font-family: arial,sans-serif;
border-bottom: 5px #e5e5e5 solid;
}
.current .item {
background: grey;
}
.item {
cursor: pointer;
padding-top: 10px;
padding-bottom: 10px;
}
.item .source {
margin-left: 20px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 20px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-bottom: 5px;
background: black;
}
I think this is the only relevant code for the problem:
2 answers
solution1
0 2015-11-10 04:34:29
you can use something like this
var main = function() {
$(".article").click(function() {
$('.article').not($(this)).removeClass('current');
if($(this).hasClass('current')){
// if this clicked before and has class current already
// in second click
// code here
}else{
// if this first click
$(this).addClass('current');
// code here
}
});
};
solution2
0 2015-11-10 04:44:17
I would re-factor your html so it has a button like handle.
HTML
<article>
<span>Show/Hide</span>
<div class="dropdown" style="display:none;">
// content to display on toggle
</div>
</article>
JS / JQUERY
$('article span')on('click', function(){ $('.dropdown').slideToggle('fast'); };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.