JavaScript function to add or remove a class upon clicking

Question

JavaScript function to add or remove a class upon clicking

Currently experiencing an issue with my accordion functionality. I have successfully implemented code that allows for toggling one heading open at a time, but I am struggling to add an open/close image beside each heading.

At the moment, when a heading is clicked, the 'open' image is removed and a 'close' image is displayed. Now, I need to find a way to swap these classes back so that when a different heading is toggled, the appropriate image is displayed.

Below is the code I am utilizing:

JavaScript

<SCRIPT>
    $("#accordion > li").click(function () {
        $("#accordian li").removeClass("faq-header");
        $(this).addClass("faq-header2");
        if (false == $(this).next().is(':visible')) {
            $('#accordion > ul').slideUp(250);
            $('#accordion > ul').addClass('faq-header');
            $(this).removeClass("faq-header");
        }
        $(this).next().slideToggle(300);
    });

    $('#accordion > ul:eq(0)').show();
</SCRIPT>

CSS

#accordion {
    list-style: none;
    margin-left:-38px;
}
#accordion ul:eq {
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:20px;
}
#accordion li{
    display: block;
    background-color: #FFF;
    font-weight: bold;
    cursor: pointer;
}
.faq-header {
    text-align:left;
    background-image:url(../img/faq-close.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
.faq-header2 {
    text-align:left;
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
#accordion ul {
    list-style: none;
    display: none;
}
#accordion ul li{
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    border-bottom:1px solid #999;
    margin-left:-38px !important;
}

I have successfully swapped out classes by using

$("#accordian li").removeClass("faq-header");

to remove one class and $(this).addClass("faq-header2"); to add another. However, I am now facing the task of removing .faq-header2 and adding back .faq-header once the selected section is no longer active. It seems like a straightforward if function is needed, but I am having trouble figuring out the code for it. Any help would be appreciated.

javascript jquery html css

Answer 1

Answer №1

The jQuery UI accordion is a reliable cross-browser widget that displays images on open and close (default is on the left, but can be changed with a simple CSS tweak).

For more information, visit this link.

If you prefer not to use the accordion, an alternative option is to explore toggleClass, which can be found here.

EDIT

Thank you for sharing your HTML. Although I didn't mean for you to provide the entire page, I appreciate it. Upon reviewing your structure, it seems a bit excessive for just an accordion. There are some issues like nesting ul tags within ul tags, which is not standard practice. Consider simplifying your structure for easier jQuery implementation. Here's an example:

<div id="accordion">
    <h3>First header</h3>
    <div>First content</div>
    <h3>Second header</h3>
    <div>Second content</div>
</div>

Regarding your current issue, the following code worked for me:

    $("#accordion > li").click(function () {              
            var self = $(this);
            self.next('ul').slideToggle(300, function () {
                if ($(this).is(':visible')) {
                    self.removeClass('faq-header').addClass('faq-header2')
                }
                else {
                    self.removeClass('faq-header2').addClass('faq-header')
                }
            });
            self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
        });

In your case, toggleClass may not be as effective as expected for adding and removing classes based on your requirements.

Answer 2

The jQuery UI accordion is a reliable cross-browser widget that displays images on open and close (default is on the left, but can be changed with a simple CSS tweak).

For more information, visit this link.

If you prefer not to use the accordion, an alternative option is to explore toggleClass, which can be found here.

EDIT

Thank you for sharing your HTML. Although I didn't mean for you to provide the entire page, I appreciate it. Upon reviewing your structure, it seems a bit excessive for just an accordion. There are some issues like nesting ul tags within ul tags, which is not standard practice. Consider simplifying your structure for easier jQuery implementation. Here's an example:

<div id="accordion">
    <h3>First header</h3>
    <div>First content</div>
    <h3>Second header</h3>
    <div>Second content</div>
</div>

Regarding your current issue, the following code worked for me:

    $("#accordion > li").click(function () {              
            var self = $(this);
            self.next('ul').slideToggle(300, function () {
                if ($(this).is(':visible')) {
                    self.removeClass('faq-header').addClass('faq-header2')
                }
                else {
                    self.removeClass('faq-header2').addClass('faq-header')
                }
            });
            self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
        });

In your case, toggleClass may not be as effective as expected for adding and removing classes based on your requirements.

Answer 3

Answer №2

In my opinion, the toggle() function can be a little confusing. I prefer to use my own method called replaceClass() to achieve the same result:

void replaceClass(Object classList, String surrogateClass, String classToReplace);

This is how it is defined:

function replaceClass(elementClassList, firstClass, secondClass) {
 if(elementClassList.contains(firstClass)){
 {
  elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}

Answer 4

In my opinion, the toggle() function can be a little confusing. I prefer to use my own method called replaceClass() to achieve the same result:

void replaceClass(Object classList, String surrogateClass, String classToReplace);

This is how it is defined:

function replaceClass(elementClassList, firstClass, secondClass) {
 if(elementClassList.contains(firstClass)){
 {
  elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}

JavaScript function to add or remove a class upon clicking

Answer №1

Answer №2

Similar questions

Guide to invoking a server-side function through JSON data?

The title attribute in Vue3 is updated through props, but computed properties remain unaffected

Can you set up an automatic redirect after a payment is made on paypal.me?

TinyMCE's Textarea is blank and not displaying any content

Python script for downloading audio files loaded with JavaScript

Is there a way to determine the location where my website is fetching CSS and media files from?

The mysterious case of the vanishing close button on Curator.io's mobile

Challenges with the height of the sticky footer in Bootstrap 4

Dropped down list failing to display JSON data

How to Fetch Byte Image with Ajax and Display it on the Client Side in ASP.Net MVC

Choosing to collapse a nested JSON arrangement in a targeted manner

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

Could a commenting feature be seamlessly integrated directly into the video player, accessible with a simple click?

typescript error caused by NaN

Tips for improving the loading speed of Ajax applications

What could be the reason my code isn't successfully performing addition within the input field?

angular trustAsHtml does not automatically insert content

Modify the content and display of a stationary div based on vertical positions

Adjust the size of the input field as text is being typed in

What is the best way to prevent a sticky element from scrolling along with the