Toggle visibility of an element when clicked

Question

Toggle visibility of an element when clicked

I have recently started learning about jquery. In my code, I have two p tags with classes .angle_up and .angle_down respectively.

The angle_up class initially has the active class assigned to it. When a user clicks on .angle_down, I want to remove the .active class from angle_up and apply it to .angle_down.

I want to display the element with the class ele with an animated effect when the active class is present. Essentially, I want to achieve a toggle effect. Any ideas on how I can accomplish this? Thank you in advance.

$(document).on("click", ".angle_up", function () {
        $(this).removeClass("active");
        var angledwn = $('.angle_down');
        angledwn.addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle up active">First</p>
<p class="angle_down"> Second</p>
<p class="ele">To hide or display</p>

jquery html css

Answer 1

Answer №1

There is a small error in your html code. The class should be angle_up instead of angle.up.

To fix this, add a common class .angle to both .angle_up and .angle_down elements and use that class as a selector for your click event.

$(document).on("click", ".angle", function () {
        var angledwn = $('.angle').not('.active');
        $(this).removeClass("active");
        angledwn.addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle angle_up active">First</p>
<p class="angle angle_down"> Second</p>
<p class="ele">To hide to display</p>

Answer 2

There is a small error in your html code. The class should be angle_up instead of angle.up.

To fix this, add a common class .angle to both .angle_up and .angle_down elements and use that class as a selector for your click event.

$(document).on("click", ".angle", function () {
        var angledwn = $('.angle').not('.active');
        $(this).removeClass("active");
        angledwn.addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle angle_up active">First</p>
<p class="angle angle_down"> Second</p>
<p class="ele">To hide to display</p>

Answer 3

Answer №2

To achieve this, you don't have to select the element by class. Simply select by the tag p and use .not() to add a class to the P element that was not clicked.

$(document).on("click", "p", function () {
        $(this).removeClass("active");
        $("p").not(this).addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle_up active">First</p>

<p class="angle_down"> Second</p>



<p class="ele">To hide to display</p>

P.S :

<p class="angle up active">First</p>

you need to correct it, it should be

 <p class="angle_up active">First</p>

you are missing _ in class name

Answer 4

To achieve this, you don't have to select the element by class. Simply select by the tag p and use .not() to add a class to the P element that was not clicked.

$(document).on("click", "p", function () {
        $(this).removeClass("active");
        $("p").not(this).addClass("active");
        var ele = $('.ele');
        ele.toggle('5000');
    });

.angle_up, .angle_down{
    color: #0096C9;
    display: none;
}
.angle_up.active, .angle_down.active{
    color: #0096C9;
    cursor: pointer;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="angle_up active">First</p>

<p class="angle_down"> Second</p>



<p class="ele">To hide to display</p>

P.S :

<p class="angle up active">First</p>

you need to correct it, it should be

 <p class="angle_up active">First</p>

you are missing _ in class name

Toggle visibility of an element when clicked

Answer №1

Answer №2

Similar questions

Execute a Bash script using Node.js based on a request from the client

Implementing a jQuery UI tooltip for toggling functionality

Is there a way to delete the header box in IPBoard?

"Can anyone provide guidance on how to use Twig to read from a JSON file

Animating a CSS shape with the .animate method

Guide to utilizing element reference with material UI components in Angular

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

Activating a inaccessible element

What causes the position: sticky; property to fail in React implementations?

Utilizing Font Awesome icons within a JSON structure

What is the best way to send the accurate data type from PHP to Javascript?

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

"Revolutionize your time input with Angular's X-editable timepicker or a

JavaScript- Tabbed Navigation with Lists as the Content

Incorporate the HTML CTA on top of the background image within the email template

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Activate the 'click' function for changing data sources

The web form response fails to show any content beyond a space character when viewed on the console

Achieving centered text alignment in a span using Bootstrap 5

Customize the focus function for an individual element