jquery toggleClass menu doesn't work on first click

Question

on my Demo, I add and remove the class Selected. If I click through the links and then click again the
OPEN FORM the toggleClass doesn't work on a first click. why? what am I missing?

Basically by clicking OPEN FORM I should addClass('selected') and toggleClass('open') .

Please see my Demo, and click the links.

http://jsfiddle.net/y8oL13Ld/

my js:

$('.cta a').on('click', function (e) {
    e.preventDefault();

    $('.cta a').removeClass('selected');
    $(this).addClass('selected');

    if ($('.Contact-form.selected').is(':visible')) {

        $('.cloned-contactform').addClass('open');
    } else {
        $('.cloned-contactform').removeClass('open');
    }

    $('.Contact-form.selected').bind('click', function () {
        $('.cloned-contactform').toggleClass('open');

    });


});

html:

<ul class="cta">
    <li><a href="#" class="Contact-form">OPEN FORM</a></li>
    <li><a href="#" class="Globe">LINK</a></li>
    <li><a href="#" class="Search">LINK</a></li>
</ul>
<div class="cloned-contactform">
    <div class="contactform"></div>
</div>

Answer 1

are you look for soemthing like this?: http://jsfiddle.net/y8oL13Ld/1/

$('.Contact-form').on('click', function() {
    $('.cta a').removeClass('selected');
    $(this).addClass('selected');

    if ($('.cloned-contactform').is(':visible')) {
        $('.cloned-contactform').removeClass('open');
        $('.cloned-contactform').hide();
    }
    else {
        $('.cloned-contactform').addClass('open');
        $('.cloned-contactform').show(); 
    }
});

explanation: the OP js is a little convoluted in the logic. although i'm not exactly sure exactly the functionality of what the OP wants, i ripped all unnecessary js and fulfilled the requirements that:

• clicking OPEN FORUM adds the class selected to the anchor (and removes selected from other links if they have class selected)

• the div cloned-contactform's class open gets toggled

• the div cloned-contactform's visibility toggles

EDIT: due to the refined definition of requirements i updated the jsfiddle: http://jsfiddle.net/y8oL13Ld/2/

the following jquery handles the fact that if the other links are clicked, it closes the div cloned-contactform and are selected.

$('.Globe, .Search').on('click', function() {
    $('.cta a').removeClass('selected');
    $(this).addClass('selected');
    $('.cloned-contactform').removeClass('open');
    $('.cloned-contactform').hide();        
});

FINAL EDIT: hopefully lol, due to scope change. http://jsfiddle.net/y8oL13Ld/4/

$('.cta a').on('click', function(){
    // if clicked contact link
    if ($(this).hasClass('contact')) {
        // if already selected
        if ($(this).hasClass('selected')) {
            // toggle
            $('.contact-div').removeClass('open');
            $(this).removeClass('selected');
        }
        // if not already selected
        else {
            // remove selected and open classes from all others
            $('.cta a').removeClass('selected');
            $('.section').removeClass('open');
            // apply selected and open classes to this
            $('.contact-div').addClass('open');
            $(this).addClass('selected');
        }
    }
 });

and i switched the html structure a little:

<div class="contact-div section">contact div</div>
<div class="global-div section" style="background:gray;">global div</div>
<div class="search-div section" style="background:lightgray;"> search div</div>