Jump to content

Keep togggle action saved on session?


lovephp
Go to solution Solved by Psycho,

Recommended Posts

i have the jquery show/hide tpggle coding and what im looking for is if i expand it the result stays same even if page is refreshed and if i hide also the result then stays same according to the action. how to get it done i surely am getting no idea so would appreciate someones input on this

 

 

<html>
<head>
<style>
.spacer {
    display:block;
}
.expshow, .expless {
    cursor:pointer;
    background:#eee;
    border:1px solid #000;
    border-radius:3px;
    padding:5px 8px;
    color:#FF3333;
}

.expless {margin-top:10px;display:inline-block;}

.info p {
    margin-bottom:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

$(document).ready(function (){
    
$(".info").hide();
    $(".expshow").click(function(event) {
        $(this).parent(".expToggle").children("div.info").slideToggle(300);
        $(this).text($(this).text() == '[+]' ? '[-]' : '[+]');
    });
    
    $(".expless").click(function(event) {
        $(this).parent(".info").slideToggle(300);
        $(".expshow").text("[+]");
});
    
});
</script>
</head>
<body>

    <div class="expToggle">
    <span class="expshow">[+]</span>
    <div class="info">
<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br/>
 <span class="expless">[-]</span>    
    </div>
    
</body>
</html>
Edited by lovephp
Link to comment
Share on other sites

  • Solution

This works but . . . if the initial state should be to be collapsed there will be a short execution of the collapse functionality on page load

 

 

<script>
 
$(document).ready(function (){
 
    //Action for priomary expand/collapse button
    $(".expshow").click(function(event) {
        $(this).parent(".expToggle").children("div.info").slideToggle(300);
        if($(this).text() == '[+]') {
            $(this).text('[-]');
            //Create expand cookie
            document.cookie = "expand=1;expires=Thu, 31 Dec 2020 12:00:00 UTC";
        } else {
            $(this).text('[+]');
            //Delete expand cookie
            document.cookie = "expand=;";
        }
    });
 
    //Action for secondary collapse button
    $(".expless").click(function(event) {
        $(".expshow").click();
    });
 
    //On load, check if expand cookie is set.
    //If not, execute click event to hide div
    if(document.cookie.indexOf("expand=1") == -1)
    {
        $(".expshow").click();
    }
 
});
</script>
  • Like 1
Link to comment
Share on other sites

 

This works but . . . if the initial state should be to be collapsed there will be a short execution of the collapse functionality on page load

<script>
 
$(document).ready(function (){
 
    //Action for priomary expand/collapse button
    $(".expshow").click(function(event) {
        $(this).parent(".expToggle").children("div.info").slideToggle(300);
        if($(this).text() == '[+]') {
            $(this).text('[-]');
            //Create expand cookie
            document.cookie = "expand=1;expires=Thu, 31 Dec 2020 12:00:00 UTC";
        } else {
            $(this).text('[+]');
            //Delete expand cookie
            document.cookie = "expand=;";
        }
    });
 
    //Action for secondary collapse button
    $(".expless").click(function(event) {
        $(".expshow").click();
    });
 
    //On load, check if expand cookie is set.
    //If not, execute click event to hide div
    if(document.cookie.indexOf("expand=1") == -1)
    {
        $(".expshow").click();
    }
 
});
</script>

does the job bro thanks aton. i thought we had to get it done through php.

Link to comment
Share on other sites

does the job bro thanks aton. i thought we had to get it done through php.

 

You could set the initial hide/show state on page load using PHP, but you would still have to set/remove the cookie in JavaScript since that action is taking place client-side. Well, technically, you could have a JavaScript call that uses PHP to set/remove the cookie, but it would still have to be initiated in JS.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.