CODEWITHSUNDEEP
javascriptjqueryhtmltext
RandomMath
RandomMath

Reputation: 691

Change Text on Open and Close of menu

Currently my navigation bar text is Menu, and when it is clicked I want Menu to change to Close, and when menu is closed it should go back to saying Menu

Here is my Current Code - On click it does change to 'Close' but doesn't change back:

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(400, function() { 
             jQuery(this).toggleClass("nav-Expanded").css("display", "");

          });
        $(".menu-Trigger").html("Close");
    });
});

HTML and CSS Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Arshdeep Soni</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, inital-scale=1">

        <link rel="stylesheet" type="text/css" href="reset.css">
        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="script.js">
        </script>

        <style type="text/css">

            body {
                background-image: url(Final6Lower.jpg);
                background-size: auto 100%;
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-position: center center;

            }

            .nav-menu li, .nav-menu a{
                display: inline-flex;
                color: rgb(137, 134, 134);
                text-decoration: none;
                font-family: Raleway;
                padding-right: 15px;
                font-size: 12px;
                letter-spacing: 7px;

            }
            .nav-menu {
                margin-top: 25px;
                text-align: center;
            }

            .nav-menu li, .nav-menu a:hover {
                color:white;
            }

            .socialIcons img {
                height: 50px;
                width: 50px;
                opacity: 0.4;
                filter: alpha(opacity=40);
                margin-right: 10px;
            }
            icons img {
                position:relative;
                display: inline;
                margin-right: 0 auto;
                margin-left: 0 auto;
            }

            .icons {
                text-align: center;
                position:absolute;
                bottom:10px;
                left:0;
                width: 100%;

            }

            .socialIcons img:hover {
                opacity:1;
                color:white;
            }

            .menu-Trigger {
                display:none;
            }

            div.nav-menu ul {
                margin:0;
                padding:0;
            }

            div.nav-menu ul li {
                list-style: none;
            }


            @media screen and (max-width: 600px) {

                .menu-Trigger {
                    display: block;
                    color:white;
                    background-color: black;
                    padding:10px;
                    text-align: center;
                    cursor:pointer;
                    font-family: raleway;
                }

                div.nav-menu ul li {
                    display:block;
                    float:none;
                    padding:8px;
                    background-color: black;
                }

                div.nav-menu {
                    display:none;
                }

                div.nav-Expanded {
                    display: block;
                }
            }


        </style>
    </head>

    <body>

        <div class="header">
        </div>                    

        <span class="menu-Trigger" align="center" >Menu</span>
        <div class="nav-menu">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>
            </ul>
        </div>

            <div class="icons">
                <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
        <a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a>
                <a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a>
            </div>
    </body>
</html>

Upvotes: 2

Views: 1048

Answers (1)

user3154108
user3154108

Reputation: 1294

I think you are simply missing the if expression checking whether your menu is expanded or not. Not sure about your html, but this might work: 

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(400, function() { 
             jQuery(this).toggleClass("nav-Expanded").css("display", "");

          });
        if (jQuery(this).hasClass("nav-Expanded"))
            $(".menu-Trigger").html("Close");
        else
            $(".menu-Trigger").html("Menu");
    });
});

Upvotes: 1

Related Questions