:visible is true no matter the toggle state

[piers]

Hi Everyone,

I am trying to store the state of a show/hide button so that when the browser is refreshed it will show the previous stored state.
I have a working solution for this on a JS fiddle https://jsfiddle.net/knetdk82/7/

However the issue I have is I cannot apply it in my jQuery library. After doing a test by alerting the text I am storing, I am only ever storing a true value no matter if the area I am trying to hide is showing or not.

Here is my code. Any help understanding why :visible is always true in my below code and how to fix it would be great.

// This is how the function is called in my main HTML file. .sh is my button and area is the areas which are being toggled. 
$('.sh').multiButtonClick({area: ['.firstpara', 'img.graphic'] ,speed: 'medium', tog: 'parent', store: 'my test'});

//the html setup of the divs and button are as below
<div class="innercontainer">
    <h2>text <button class="sh">show/hide</button></h2>
    <p class="firstpara">
    text goes here
    </p>
</div>
// This is the relevent part of my library
(function( $ ) {
  $.fn.multiButtonClick = function (settings) {

    var defaults = {
    area : 'p',
    speed : 'slow',
    tog : 'parent',
    store: 'my test'
    };

    var settings = $.extend({}, defaults, settings);
    else if (settings.tog == 'parent')
    {
        return $(this).click(function() { 
        $(this).parent().nextAll(settings.area).toggle(settings.speed);
        localStorage.setItem(settings.store, $(".innercontainer").siblings().is(":visible"));
        alert($(".innercontainer").siblings().is(":visible"));

        });

    var set = localStorage.getItem(settings.store);

    if (set == 'true') {
        $(settings.area).show()
    }
    else{
        $(settings.area).hide()
    }
  }
}

Thanks,

Piers

[Aeonix]

I am trying to store the state of a show/hide button so that when the browser is refreshed it will show the previous stored state.

So, you want, if you left it toggled on, and you refresh the page, it's still on, but if you toggled it off, it will be toggled off after refresh as well?

Works on Opera and Chrome, I expect it to work on Firefox and Safari as well. Maybe your browser denies localStorage space to your JavaScript application.

:visible is true no matter the toggle state

Or you want totally avoid it? But this statement is false, it's not always :visible. At least not in my browsers.

Also if (set == 'true') { can replaced with if (set) {, works same.

[piers]

Hi Aeonix,

I have tested this in Firefox as well and still get the same issue. I have tried is.(":visible") which always returns true and is.(":hidden") always returns false in my library.

From further testing I have realised it is something to do with my selectors. In the jsfiddle in my OP if you take out siblings() the value you get in localStorage is always true no matter if you show the content or not. Also in taking out siblings() if you change the selector to $(".firstpara") then it works fine.

So the question is how do I setup my selectors correctly so that this works?

[Aeonix]

o_O

That's one of the weirdest bugs I've ever seen. If I try fresh Fiddle and I say alert("Hi."); it alerts me "Hi.", when I comment your entire jQuery out, and I type alert("Hi."); no response is given.

I can't really help you. If I were you, I'd wait day or two, if nobody can solve this. I'd be visitng Mozilla soon, because somehow, your code commented or not, blocks every single attempt to alert(); anything, so I wouldn't be surprized that your or any other code cannot be executed, thus you aren't receiving reaction that you'd like to receive.

Then I thought why else if if there's not if. So I changed it to if, but, still nothing happened.

As I said, let's just wait until experts come along that would give you advice or hopefully solve it.

The most matchmade program so far, eliminating missing semicolons and brackets and all, are:

(function( $ ) {
  $.fn.multiButtonClick = function (settings) {
    var defaults = {
    area : 'p',
    speed : 'slow',
    tog : 'parent',
    store: 'my test'
    };
    settings = $.extend({}, defaults, settings);
    if (settings.tog == 'parent')
    {
        return $(this).click(function() { 
        $(this).parent().nextAll(settings.area).toggle(settings.speed);
        localStorage.setItem(settings.store, $(".innercontainer").siblings().is(":visible"));
        alert($(".innercontainer").siblings().is(":visible"));
        });
    var set = localStorage.getItem(settings.store);
    if (set == 'true') {
        $(settings.area).show();
    }
    else{
        $(settings.area).hide();
    }
  }
  };});

I used program to it :|, I'm sorry.

[piers]

Hi,

Does anyone have a different approach that you can store the show/hide state?

Regards,

Piers