CODEWITHSUNDEEP
javascriptjqueryhtmlcsscookies
Répás
Répás

Reputation: 1820

jQuery slideToggle and cookies with many boxes

I'd like to make many boxes without identifier and onClick close them like:

<div class="box">
    <header>I'm the box header<ins></ins></header>
    <h1>Title here</h1>
    <p>I'm a paragraph.</p>
</div>

With this script

$(".box header").click(function(){
    $(this).nextAll().slideToggle();
});

In the view of task the method of hiding is not so important. The <box><header></header><content>text</content></box> and like $this.next().slideToggle() is also good for me.

The question is that, how can i add a cookie for the toggled elements, to stay them close on the page refresh.
Like the $(".tabs:not(.forget)").tabs({cookie: {expires: 1}, collapsible: true});.

Is it possible without making in ID, and check all the IDs in the cookies? I'm looking for a better solution for it. Thanks for the help.

Upvotes: 0

Views: 584

Answers (4)

ElonU Webdev
ElonU Webdev

Reputation: 2459

New Answer:

I really don't think you can solve this challenge without assigning unique IDs to each of your boxes. From a theoretical standpoint (I'll go out on a limb and say also a practical standpoint), what you're trying to accomplish fits perfectly with the concept of assigning unique IDs. You want to take individual, unique action on individual, unique elements. Trying to accomplish that without having individual, unique IDs is fighting against the fundamental theory itself.

That said, I do appreciate that generating unique IDs on the server side is probably a hassle you'd rather do without. But I think the best answer to your question is to do exactly what you were hoping not to have to do... :-)

Old Answer:

If the boxes will always have the same order in the DOM, you could append the index number of the box to a string, which is then stored in your cookie. Like "2,3,10,13" then on page load, you read the cookie, cookieVal.split(",") then for loop through the values and use the jQuery :eq() selector (http://api.jquery.com/eq-selector/) to do something like

$(".box:eq(" + i + ")").hide();

Upvotes: 1

R&#233;p&#225;s
R&#233;p&#225;s

Reputation: 1820

Well, I think I did it -.-

In the case of 

<div class="box">
    <header>Box Header <ins></ins></header>
    <figure>
        <h1>Header 1</h1>
        <h2>Header 2</h2>
        <p>Paragraph.</p>
    </figure>
</div>

With the JS:

$("body .box figure").each(function(i){
    var o = $.cookie('boxopened'+i);
    if (!o) 
    {
        $(this).show();
    }
    else 
    {
        $(this).hide();
    }
});
$("body .box header").click(function(){
    var i = $(this).next().index("body .box figure");
    var o = $.cookie('boxopened'+i);
    if (!o)
    {
        $.cookie('boxopened'+i, 'true'); 
    }
    else 
    { 
        $.cookie('boxopened'+i, ''); 
    }
    $(this).next().slideToggle();
});

Works. Any suggestions for this? How can i make this better?

Upvotes: 0

webXL
webXL

Reputation: 1630

You need some way to reference the boxes in a cookie. It could be an ID, class, or if the number of boxes is fixed, and the order doesn't change, it could be a number. I would use an ID (or some other unique attribute) to be safe, because let's say for whatever reason the order of the boxes changes, then the numeric order in the cookie wouldn't match up.

var closedBoxesCookie=document.cookie;
$(document).ready(function() { 
    $(closedBoxesCookie.split(',')).each(function() {
        $('#' + this).hide();
    });
});

Upvotes: 1

Alex Rashkov
Alex Rashkov

Reputation: 10015

$(".box header").click(function(){
    $(.box).slideToggle();
    // Set the cookie here
    var boxState = ($(.box).css('display')=='block')? 1: 0;
    $.cookie("boxState", state);
});

You can use jQuery Cookie to set the cookie.

Upvotes: 1

Related Questions