Show hidden div permanently throughout website after clicking on a specific href link once

Question

I found this link of a question like the one I have, the thing is that the solution they give is for clicking any div in the html, and I need something like, when i click on the first div, the second div showing and when I press on the second div, the third div is showing. And I need to keep if in localstorage... This is my HTML code:

<div id='btn1' class="col-lg-4"">
<a id="tema_1 " href="tema.html"><img id="img_tema1" class="img-circle" src="../assets/img/primer_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 1</h2>
</div><!-- /.col-lg-4 -->

<div class="col-lg-4-2">
<a href=""><img id="img_tema2" class="img-circle2" src="../assets/img/segundo_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 2</h2>  
</div><!-- /.col-lg-4-2 -->

<div class="col-lg-4-3">
<a href="tema_3.html"><img id="img_tema3" class="img-circle3" src="../assets/img/tercer_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 3</h2>
</div><!-- /.col-lg-4-3 --

And this is the example of Jquery code that i use:

var hide2 = localStorage[location] ? false : true;
var hidden2 = document.querySelector('.col-lg-4-2');

if(hide2) {
    hidden2.style.display = 'none';
    document.onclick = function() {
        localStorage[location] = true;
        hidden2.style.display = '';
        document.onclick = '';
        console.log('click');
    }
}

But as I say... it makes that any div that I click, shows the Tema 2, and I need that the only div that can show the Tema 2 is the Tema 1 Div.

Excuse my bad English but my mother language is Spanish.

Thank you for any help.

See [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) , [How to differentiate localStorage from storing each file on click?](http://stackoverflow.com/questions/33376024/how-to-differentiate-localstorage-from-storing-each-file-on-click/) — guest271314, Oct 09 '16 at 23:37

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

I think this might be solved using simple jQuery. I've used the example specified at: Previous Similar question and changed it so it will fit your code. It currently works which is fine but I might wanna work around it if you don't like my solution.

 $(function () {
    var showLittleHeader = localStorage.getItem('#second-img');
    if (showLittleHeader) {
        $('#second-img').show();
    }
    $('#first-img').on('click', function () {
        localStorage.setItem('#second-img', 1);
        $('#second-img').show();
    });

});

$(function () {
    var showLittleHeader = localStorage.getItem('#third-img');
    if (showLittleHeader) {
        $('#third-img').show();
    }
    $('#second-img').on('click', function () {
        localStorage.setItem('#third-img', 1);
        $('#third-img').show();
    });

});

Look at this JS Fiddle and see if it does the job for you:

Updated Solution with Local Storage

edited May 23 '17 at 12:00

Community

1
1

answered Oct 09 '16 at 23:47

ZombieChowder

1,187
12
36

That solution looks great, but i need that the images that are displayed, gets permanently displayed, do you know how could i do that? – Andrés Girón Oct 10 '16 at 00:06
@AndrésGirón I think this should work as a charm. Rate and accept it if works for you. Thanks in advance. – ZombieChowder Oct 10 '16 at 00:39
I am having problems with the code, it works perfect on the jsfiddle... but when i was trying to adapt it, it didn't work, so i decided to use the example as it is on the jsfiddle and i copied the files to see how the example worked, but it didn´t work neither... I don´t know what could i be doing wrong. Man... really, thanks a lot for helping me to solve this. – Andrés Girón Oct 10 '16 at 02:44
I was thinking if its possible to hide and show the whole div instead the image only @ZombieChowder – Andrés Girón Oct 10 '16 at 03:40
@AndrésGirón just change the jQuery code so it changes the entire div rather than the image itself. – ZombieChowder Oct 10 '16 at 07:46
1

Man really thanks for all the help, the fail that i had was because i did't have the ajax.googleapis library on my HTML, but now its working perfect... You really saved my life. – Andrés Girón Oct 10 '16 at 13:00

Show hidden div permanently throughout website after clicking on a specific href link once

1 Answers1