CODEWITHSUNDEEP
javascriptjqueryhtml
Ria
Ria

Reputation: 526

Open Div on click then leave it open when clicked again

I have the following

 $(document).ready(
    function() {
        $("#click").click(function() {
            $("#top").toggle();
        });
    });


<div id="click"><img src="/files/images/x.jpg" alt="x"/>Click to open</div>
    <div id="top"Some information></div>

What I want is the div to stay open when clicked or the page is reloaded again. Is there a way to do this?

Upvotes: 0

Views: 572

Answers (4)

DumbergerL
DumbergerL

Reputation: 171

<script>
$(document).ready(
    function() {
        $("#click").click(function() {
            $("#top").show();
        });
    });
</script>

<div id="click"><img src="/files/images/x.jpg" alt="x"/>Click to open</div>
<div id="top" style="display: none;"> Some information</div>

This way the Top-Div will stayed open even if you click on #click twice or more than once.

Upvotes: 1

Arpad Hollo
Arpad Hollo

Reputation: 201

Instead of calling toggle function add a class (eg. opened) to the div. Using CSS add display:none; to the div and display:block; to the opened class.

<script>
$(document).ready(
    function() {
        $("#click").click(function() {
            $("#top").addClass('opened');
        });
    });
</script>
<style>
#top { display: none; }
#top.opened { display: block; }
</style>

<div id="click"><img src="/files/images/x.jpg" alt="x"/>Click to open</div>
<div id="top"> Some information</div>

Upvotes: 0

abhijeetwebdev
abhijeetwebdev

Reputation: 386

As per your requirement, I guess you need to use the cookie. Set the cookie with the flag if the popup is opened or closed on click event trigger and on DOM ready event check if for the variable if the value has set to open then trigger the popup open action or else keep it closed.

Upvotes: 1

quirimmo
quirimmo

Reputation: 9988

With toogle you will close it the second click. The open the third and so on. Just change it to show().

$("#top").show();

About keep it opened when you refresh the page you can use local storage, or cookies or whatever client side, but it will be kept only in the current browser. Otherwise you have to store the status through an AJAX request to the server and get back the value.

Upvotes: 0

Related Questions