Javascript simple add class remove class

Question

<div onclick="myFunction();"> Click Me</div>
<div id="nav" style="" class="hide">
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
</div>

function myFunction (){
    if ("show"){
        document.getElementById('nav').style.display='none';
            } else if ("hide"){
                document.getElementById('nav').style.display='none';
            }
    }

Onclick the click me btn, i want to show & hide this "nav". using addclass remove class.

Please help me in this pure javascript.

Thanks.

Gwendal · Accepted Answer · 2016-02-08 13:21:57Z

2

Maybe this will work better ?

<div id="btn"> Click Me</div>
<div id="nav" style="" class="hide">
    <ul>
        <li>sample</li>
        <li>sample</li>
        <li>sample</li>
    </ul>
</div>

<script>
    var menu = document.getElementById('nav');
    document.getElementById('btn').onclick = function() {
        if (menu.className == "hide"){
            menu.className = "show";
        } else {
            menu.className ='hide';
        }
    }
</script>

<style>
    .show {
        display: inherit;
    }
    .hide {
        display: none;
    }
</style>

edited Feb 8, 2016 at 13:21

answered Feb 8, 2016 at 13:08

Gwendal

1,2737 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Solomon Over a year ago

Thanks for this, This is working fine. How do i do instant of display - block & inline. I want to do this by ADD class & remove class..

Gwendal Over a year ago

Not sure to understand what you want, you need to have too classes like hide and display ? Don't forget to upvote if I helped you :) @user3852173

Solomon Over a year ago

I am having 2class for the id=nav onclick btn i want to add & remove class in nav = hide & show.

Albzi · Accepted Answer · 2016-02-08 13:17:45Z

2

You can do something like this:

myFunction() {
    document.getElementById("nav").classList.toggle("hide");
}

JSFiddle

edited Feb 8, 2016 at 13:17

answered Feb 8, 2016 at 13:01

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

1 Comment

Solomon Over a year ago

How do i implement this? Unexpected token - error message its showing

Jordan Lowe · Accepted Answer · 2016-02-08 13:21:50Z

0

Store your element, just for tidier code.

var myElement = document.getElementById('nav');

Using display

myElement.style.display = 'none'; // Hide element
myElement.style.display = 'block'; // Show block elements (div, p)
myElement.style.display = 'inline'; // Show inline elements (span, a)

Using Visibility:

myElement.style.visibility = 'hidden'; // Hide element
myElement.style.visibility = 'visible'; // Show element

Thus using the same code to check for the styles within the if statements.

function myFunction ()
{
    if (myElement.style.display == "none")
        myElement.style.display='block';
    else
         myElement.style.display='none';
 }

Example: http://jsfiddle.net/366aofbo/

edited Feb 8, 2016 at 13:21

answered Feb 8, 2016 at 13:14

Jordan Lowe

3682 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript simple add class remove class

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related