CODEWITHSUNDEEP
jquerycsstogglehtml
user2682799
user2682799

Reputation: 3

Toggle addClass removes span

I'm trying to build a website, but when I use the addClass and removeClass in combination with toggle, my span is removed at the first click. Therefore I cannot click my span again.

Here are my HTML, script and CSS:

HTML

<div id="footersi">
    <span class="footspans">First span</span>
    <span class="footspans">Second span</span>
    <span class="footspans">Third span</span>
    <span class="footspans">Fourth span</span>
    <span class="footspans">Fifth span</span>
    </div>    
    <div id="footerci">
    <span class="footspans" id="contactinf">Contactinfo</span>
        <ul class="index">
            <li><b>Li1</b></li>    
        </ul>
    </div>

Script (jQuery)

$(document).ready(function(){
    $(".index").hide();

    $("#contactinf").click(function(){
        $(this).toggle(
            function(){
                $(this).addClass('active');
            },
            function(){
                $(this).removeClass('active');
            }
        );
        $(".index").slideToggle();
        $("html, body").animate({ scrollTop: 1000 }, 600);
    });
});

CSS

.footspans {
    cursor:pointer;
    color:#9D9D9D;
    transition:color 0.2s ease 0s;
    -webkit-transition:color 0.2s ease 0s;
    font-size:1.1em;
    text-decoration:none;
    font-weight:bold;
    margin-right:20px;
}

.footspans:hover {
    color:black;
}

#footersi {
    float:left;
    width:740px;
}

#footerci {
    float:right;
    width:240px;
}

#contactinf {
    float:right;
    margin-right:5px;
}

.index {
    float:left;
}

.active {
    float:left;
    color:black;
}

Upvotes: 0

Views: 131

Answers (1)

tymeJV
tymeJV

Reputation: 104785

toggle() is toggling the visibility of the elements, so on the first click it is going to hide the element, and you wont be able to click it again. I believe what you are actually looking for is toggleClass()

$("#contactinf").click(function() {
    $(this).toggleClass("active");
});

Upvotes: 1

Related Questions