There are multiple words like this:
word1 word2 word3 ...
Each word in an <a> tag is associated with 1 to 3 <li> tags. I need some actions to happen if the associated <a> tag is clicked.
Here are my codes:
HTML
<a>word1</a>
<div class="sents">
<li>This is a first example</li>
</div>
<a>word2</a>
<div class="sents">
<li>This is a second example</li>
<li>This is a second example</li>
</div>
<a>word3</a>
<div class="sents">
<li>This is a third example</li>
<li>This is a third example</li>
<li>This is a third example</li>
</div>
Script
$(document).ready(function () {
$('a').click(function () {
$('a').next('div').removeClass('active');
$(this).next('div').toggleClass('active');
});
});
CSS
a:hover {
background-color: yellow;
}
.sents {
display: none;
}
.active {
display: block;
position: absolute;
background-color: yellow;
width: 100%;
padding: 5px;
}
And this is the demo:
https://jsfiddle.net/kyubyong/umxf19vo/22/
I'm not so much comfortable with javascript/jquery. Thanks for your help in advance.
Your code almost works, except for hiding the examples when the same word is clicked. To do that, you must first get the current state of the word clicked. Only make it active if it wasn't already active.
To get the current state, you can use hasClass('active'). Since you are adding the class (conditionally), you can just use addClass('active') inside an if statement.
Alternatively, you could use toggleClass('active', !isActive), but then, when deactivating a word by clicking it again, you would attempt to remove a class of which you know it already was removed before. That would be useless interaction with the DOM, and I prefer to use the if then to prevent that.
$(document).ready(function () {
$('a').click(function () {
var isActive = $(this).next('div').hasClass('active');
$('a').next('div').removeClass('active');
if (!isActive) {
$(this).next('div').addClass('active');
}
});
});a:hover {
background-color: yellow;
}
.sents {
display: none;
}
.active {
display: block;
position: absolute;
background-color: yellow;
width: 100%;
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>word1</a>
<div class="sents">
<li>This is a first example</li>
</div>
<a>word2</a>
<div class="sents">
<li>This is a second example</li>
<li>This is a second example</li>
</div>
<a>word3</a>
<div class="sents">
<li>This is a third example</li>
<li>This is a third example</li>
<li>This is a third example</li>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments