CODEWITHSUNDEEP
javascriptjquerycsstoggle
Sam Skirrow
Sam Skirrow

Reputation: 3697

jQuery toggle text change and hide elements

Trying to create a simple function where a user clicks a button, it shows a form and changes the text on the button. When they click it again, the form hides and button text changes back to what it was.

Here is what I have so far:

$('a.subscribe').click(function() {
var link = $(this);
$('.intro_cta form').toggle(function(){
    if ($(this).is(':visible')) {
        $('a.enter').css('display','none');
        link.text('CLOSE');

    } else {
        link.text('SUBSCRIBE'); 
        $('a.enter').css('display','block');
    }     
}); 
});

And the HTML markup:

<a href="#" class="subscribe button white">SUBSCRIBE</a>
    <form class="subscribe_form">
        <input type="text" placeholder="EMAIL"/>
        <input type="submit" value="JOIN" />

    </form>
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a>

When the user clicks the SUBSCRIBE button, it should show the form and hide the ENTER BUTTON and change the text on the subscribe button to "CLOSE". The opposite should happen when the button is pressed again.

This does kind of work, however the toggle makes the form slide in - I just want it to show or hide.

Upvotes: 0

Views: 836

Answers (2)

Navneeth
Navneeth

Reputation: 988

Check this simple code without toggle.

var check=false;
$("form").hide();
$("a.enter").hide();
$('a.subscribe').click(function() {
    if(check==false){
       check=true;
        $(this).text('CLOSE');
        
        
        $("form").show();
        $("a.enter").show();
    }else{
       check=false;
        $(this).text('SUBSCRIBE');
        $("form").hide();
        $("a.enter").hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="subscribe button white">SUBSCRIBE</a>
    <form class="subscribe_form">
        <input type="text" placeholder="EMAIL"/>
        <input type="submit" value="JOIN" />

    </form>
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a>

Upvotes: 0

Nirmi
Nirmi

Reputation: 1119

you could use .fadeToggle() for show/hide without that slide effect. See here for documentation

Upvotes: 1

Related Questions