How to toggle some elements using jquery/javascript?

Question

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.

1. I want to make them appear if their associated word (say, word1) is clicked.
2. If another word is clicked, the unfolded examples should disappear automatically.
3. If word1 is clicked again, the examples should be hidden.

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.

Answer 1

The problem is that you remove the .active class from all the divs (including the one you want to toggle) and then the toggleClass function just adds it back, so the div you want to toggle will always be visible.

Use the siblings() selector function to avoid this:

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('div').siblings().removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});

Working fiddle: https://jsfiddle.net/umxf19vo/24/

Answer 2

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>

Answer 3

Try it like this

$(document).ready(function () {
    $('a').click(function () {
        if ($(this).next('div').hasClass('active')){
            $('.sents').removeClass('active');
        }
        else{
            $('.sents').removeClass('active');
            $(this).next('div').addClass('active');
        } 
    });
});