check if class in element equals a value javascript

Question

I have a menu and my users should be able to resize it by pressing a button. I have the following code:

<header class='large'>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</header>
<button onclick="resizeMenu()">Resize</button>




function resizeMenu()
    {
        if(exists(header.large) {
            $("header").removeClass("large").addClass("small");
        } elseif(exists(header.small)
            $("header").removeClass("small").addClass("large");
        }
    }

I don't really have an idea on how I should write the condition. By the way I am using jquery.

Zzyrk · Accepted Answer · 2014-01-30 12:58:09Z

3

You can use the .hasClass from jQuery:

function resizeMenu()
{
    if($("header").hasClass("large")) {
        $("header").removeClass("large").addClass("small");
    } elseif($("header").hasClass("small")) 
        $("header").removeClass("small").addClass("large");
    }
}

answered Jan 30, 2014 at 12:58

Zzyrk

9058 silver badges16 bronze badges

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

2 Comments

Reinstate Monica Cellio Over a year ago

I prefer the answer by Arun, but +1 for this since it tells him how to check an element for a class.

Zzyrk Over a year ago

You are right. In his situation, .toggle() would be better. But in the case where he would want small, medium, large, xx-large, etc.. toggle wont do the trick.

Arun P Johny · Accepted Answer · 2014-01-30 12:56:25Z

2

Use toggleClass() to switch between the 2 classes

function resizeMenu() {
    $("header").toggleClass("large small");
}

To check whether an element has class use .hasClass()

function resizeMenu() {
    var $header = $('header')
    if ($header.hasClass('large')) {
        $header.removeClass("large").addClass("small");
    } else if ($header.hasClass('small')) {
        $header.removeClass("small").addClass("large");
    }
}

answered Jan 30, 2014 at 12:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Anoop Joshi P · Accepted Answer · 2014-01-30 13:03:48Z

is this you want?

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#resize").click(function () {
            $("nav").animate({
                height: ["toggle", "swing"]
            }, {
                duration: 500,
                complete: function () {

                }
            });

        });
    });

</script>
</head>
<body>
<header>
<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>
</header>
<button id="resize">
    Resize</button>
</body>
</html>

Sudharsan S · Accepted Answer · 2014-01-30 13:09:41Z

0

Simply Write. Use Toggle Class in Jquery for add and remove Class

function resizeMenu()
{

   $("header").toggleClass("large small");

}

answered Jan 30, 2014 at 13:09

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

1 Comment

Zzyrk Over a year ago

Please read other answers before posting. The .toggleClass() method was already covered by Arun P Johny 15 minutes ago.

Collectives™ on Stack Overflow

check if class in element equals a value javascript

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related