Ways in which elements can be toggled through jquery or javascript?

Question

Ways in which elements can be toggled through jquery or javascript?

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.

javascript jquery html css

Answer 1

Answer №1

The issue arises when you eliminate the .active class from all of the div elements (including the one that should toggle) and then the toggleClass function simply adds it back, resulting in the targeted div always being visible.

To resolve this, utilize the siblings() selector function:

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

View the working demonstration here: https://jsfiddle.net/umxf19vo/24/

Answer 2

The issue arises when you eliminate the .active class from all of the div elements (including the one that should toggle) and then the toggleClass function simply adds it back, resulting in the targeted div always being visible.

To resolve this, utilize the siblings() selector function:

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

View the working demonstration here: https://jsfiddle.net/umxf19vo/24/

Answer 3

Answer №2

It appears that your code is almost functional, but there is an issue with hiding the examples when the same word is clicked. To address this issue, you need to first determine the current state of the word that was clicked. The solution is to only set it as active if it wasn't already in that state.

You can check the current state by using the hasClass('active') method. Since you are conditionally adding the class, you can simply use addClass('active') within an if statement.

Another approach would be to utilize toggleClass('active', !isActive). However, if you choose this option, clicking on a word to deactivate it would result in attempting to remove a class that had already been removed. This unnecessary interaction with the DOM can be prevented by using an if statement instead.

$(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 4

It appears that your code is almost functional, but there is an issue with hiding the examples when the same word is clicked. To address this issue, you need to first determine the current state of the word that was clicked. The solution is to only set it as active if it wasn't already in that state.

You can check the current state by using the hasClass('active') method. Since you are conditionally adding the class, you can simply use addClass('active') within an if statement.

Another approach would be to utilize toggleClass('active', !isActive). However, if you choose this option, clicking on a word to deactivate it would result in attempting to remove a class that had already been removed. This unnecessary interaction with the DOM can be prevented by using an if statement instead.

$(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 5

Answer №3

Give this a shot

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

Answer 6

Give this a shot

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

Ways in which elements can be toggled through jquery or javascript?

Answer №1

Answer №2

Answer №3

Similar questions

jsonwebtoken does not fetch a token

When utilizing NavLink in React Router Dom for routing to an external link, a local host is automatically included in the prefix

The most efficient way to invoke a jws void method in the fewest steps possible

Transmit information to php script using an html document format

Changing an ng-repeat filter following the manual update of a text input

Include onload to element without running it in Puppeteer

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?

The Upstash Redis scan operation

Preserving the <script> tag when defining HTML code

Uncovering the inherent worth of an item pulled from a remote location using Vue.js

The age calculator is failing to display the accurate age calculation

Is it feasible to customize the css3 resize feature?

The flow of browsing the web and executing scripts in a web browser

Issue in Ionic 2: typescript: The identifier 'EventStaffLogService' could not be located

Is it possible to access a class with protected/private fields written in TypeScript from outside the class in JavaScript?

Delete the tag that comes before

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Having trouble with setting up ENV variables while deploying the app on Heroku

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component