There are various words listed below:
word1 word2 word3 ...
Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place.
- I want the examples to display when the associated word (e.g., word1) is clicked.
- If another word is clicked, the displayed examples should automatically hide.
- If word1 is clicked again, the examples should be hidden.
Below are the code snippets:
HTML
<a>word1</a>
<div class="sents">
<li>This is the first example</li>
</div>
<a>word2</a>
<div class="sents">
<li>This is the second example</li>
<li>This is the second example</li>
</div>
<a>word3</a>
<div class="sents">
<li>This is the third example</li>
<li>This is the third example</li>
<li>This is the 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;
}
You can view the demo here.
I'm not very familiar with javascript/jquery. Thank you for your assistance in advance.