CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2382930
user2382930

Reputation: 5

How to toggle display: inline and display toggle?

I want to create two popup windows that appear on link click and disappear by clicking the link once again. I am trying to do this with display: none and display: inline, but unfortunately once I click on a link, display: inline is added, but can not be removed.

jQuery:

$(document).ready(function() {
$('#open_thanks').click(function(e) {
    e.preventDefault();
    var tPop = $('.thanks_popup');
    if (tPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else {
        tPop.css('display','inline')
    }
});
$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

});

HTML:

<html>
    <head>
        <title>Popups</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/custom.js"></script>
    </head>
    <body>

<a href="#" id="open_thanks">Thanks Popup</a>

<a href="#" id="open_reference">Open Reference</a>

        <!-- Thanks PopUp -->
        <section class="thanks_popup">
            <section class="shell">
                <!-- Orange Header -->
                <h4>"Thanks! You're on our early invite list!"</h4>
                <!-- Main Message -->
                <p>Tell your friends about ItsPlatonic... <br>
we promise that those who sign up early will get special rewards..</p>              
            </section>
        </section>

        <section class="leave_reference_popup">
            <section class="shell">
                <section class="side-1">
                    <h4>LEAVE A REFERENCE in below box:</h4>
                    <div class="styled-select">
                        <select name="" id="">
                            <option value="">Positive</option>
                        </select>
                    </div>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference.</p>
                    <textarea name="" id="" cols="30" rows="10">

                    </textarea>
                </section>
                <section class="side-2">
                    <h4>INSTRUCTIONS:</h4>
                    <p>Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. <br><br>

Here you can insert instructions on how to leave reference.  Here you can insert instructions on how to leave reference. Here you can insert instructions on how to leave reference. </p>
                    <button></button>
                </section>
            </section>
        </section> 
    </body>
</html>

CSS:

section.thanks_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}
section.leave_reference_popup {
  display: none;
  position: fixed;
  margin: 0 auto;
  width: 90%;
  top: 7%;
  margin-left: 5%; 
}

Upvotes: 0

Views: 1545

Answers (3)

DevKev
DevKev

Reputation: 6304

Please use a jsFiddle or something similar next time. I think you can just use jQuery .toggle Also use jQuery instead of $

You may have to refactor so clicking either closes the other. 

jQuery(document).ready(function () {
jQuery('#open_thanks').click(function (e) {
    e.preventDefault();
    var tPop = jQuery('.thanks_popup').toggle('slow');
});
jQuery('#open_reference').click(function (e) {
    e.preventDefault();
    var rPop = jQuery('.leave_reference_popup').toggle('slow');
})
});

DEMO: http://jsfiddle.net/EMyRm/3/

Upvotes: 0

Lee Taylor
Lee Taylor

Reputation: 7994

Just use jQuery's toggle function:

tPop.toggle();

With no parameters, the .toggle() method simply toggles the visibility of elements:

Upvotes: 2

ameed
ameed

Reputation: 1160

$('#open_reference').click(function(e) {
    e.preventDefault();
    var rPop = $('.leave_reference_popup');
    if (rPop.css('display') === 'inline') {
        tPop.css('display','none')                // <-- CHANGE THIS TO RPOP
    } else if (rPop.css('display') === 'none') {
        rPop.css('display','inline')
    }
})

You forgot to change the tPop to rPop in the rPop section. Toggling the rPop thus will not be able to toggle it off.

Upvotes: 0

Related Questions