Adding a Class with jQuery On Click Event

Question

Adding a Class with jQuery On Click Event

Trying to troubleshoot why this code isn't functioning:

HTML:

<div class="all-btn">All Button</div>

<div class="item all"> item 1 </div>
<div class="item all"> item 2 </div>
<div class="item all"> item 3 </div>
<div class="item all"> item 4 </div>
<div class="item all"> item 5 </div>

CSS:

.all-btn {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #000;
    display: inline-block;
    margin-bottom: 15px;
}

.item {
    display: none;
}
.show {
    display: block;
}

jQuery:

$('.all-btn').on('click', function () {
    $('.all').addClass('show');
});

I aim to click the button and have it add the class show to all div elements with the class all

Can anyone point me in the right direction?

Appreciate any help.

jquery css onclick click addclass

Answer 1

Answer №1

Essentially, I have accomplished this...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").show();
    });
});

Alternatively, you can utilize this method to switch between displaying and hiding classes...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").toggle();
    });
});

I have maintained the same structure of your HTML elements...

<div class="all-btn">Show Button</div>

<div class="item all">Item 1</div>
<div class="item all">Item 2 </div>
<div class="item all">Item 3 </div>
<div class="item all">Item 4 </div>
<div class="item all">Item 5 </div>

However, I have taken out the .item and .show classes, while preserving your .all-button CSS style, although it is not essential for the functionality.

Check out the Demo: https://jsfiddle.net/bv6ort3g/1/

For a more elaborate demonstration, visit: https://jsfiddle.net/bv6ort3g/2/

Answer 2

Essentially, I have accomplished this...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").show();
    });
});

Alternatively, you can utilize this method to switch between displaying and hiding classes...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").toggle();
    });
});

I have maintained the same structure of your HTML elements...

<div class="all-btn">Show Button</div>

<div class="item all">Item 1</div>
<div class="item all">Item 2 </div>
<div class="item all">Item 3 </div>
<div class="item all">Item 4 </div>
<div class="item all">Item 5 </div>

However, I have taken out the .item and .show classes, while preserving your .all-button CSS style, although it is not essential for the functionality.

Check out the Demo: https://jsfiddle.net/bv6ort3g/1/

For a more elaborate demonstration, visit: https://jsfiddle.net/bv6ort3g/2/

Answer 3

Answer №2

If you have specific CSS rules in place, you can utilize the toggleClass() method to switch between two classes.

 $('.all-btn').on('click', function () {
   $('.all').toggleClass('show item');
 });

Alternatively:

$('.all-btn').on('click', function () {
    $('.all').toggle();
});

Answer 4

If you have specific CSS rules in place, you can utilize the toggleClass() method to switch between two classes.

 $('.all-btn').on('click', function () {
   $('.all').toggleClass('show item');
 });

Alternatively:

$('.all-btn').on('click', function () {
    $('.all').toggle();
});

Adding a Class with jQuery On Click Event

Answer №1

Answer №2

Similar questions

Issues with implementing Bootstrap Collapse functionality on dynamically generated content using Ajax

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

What is the best method for setting the height of an empty inline block element to match the line height of its container?

Display numerous divisions depending on the choices made in several Select2 fields

Develop a dynamic animation using gradient and opacity properties

Steps for updating the <option> selection in the third <select> menu when the second <select> menu changes, with the second menu being populated by altering the value of the first dropdown through jQuery AJAX

Making AJAX calls without displaying any alerts or prompts

Take out the "href" attribute from the parent element

The Bootstrap modal will not appear when the parent container's position is fixed

Integrate Javascript code into a JavaScript file

Identify the hover event within a div element

Selecting an element using jQuery with the `:eq(i)` selector

Conceal one element and reveal a different one upon submitting a form

Troubleshooting: Problems with AJAX POST request in Spring MVC Controller

Stop the context menu from popping up when the element is right-clicked

In-line Vertical Ticker Display

variances in CSS performance between local and remote hosting

Create a dynamic animation using Angular to smoothly move a div element across the

align the horizontal navigation bar

Transfer the content from a text area to a div element while keeping the original line breaks