Mixing
How to show container on click with Localstorage?
1
I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.
javascript css local-storage
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
add a comment |
1
I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.
javascript css local-storage
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
Your code suggests that you want to hide thejs-commentsevery single time somebody clicks that element. Is that what you’re trying to achieve?
– Thomas Edwards
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57
add a comment |
1
1
1
I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.
javascript css local-storage
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.
javascript css local-storage
javascript css local-storage
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
edited Nov 20 '18 at 10:59
bodanus7
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
asked Nov 20 '18 at 9:53
bodanus7bodanus7
93
93
Your code suggests that you want to hide thejs-commentsevery single time somebody clicks that element. Is that what you’re trying to achieve?
– Thomas Edwards
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57
add a comment |
Your code suggests that you want to hide thejs-commentsevery single time somebody clicks that element. Is that what you’re trying to achieve?
– Thomas Edwards
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57
Your code suggests that you want to hide the
js-comments every single time somebody clicks that element. Is that what you’re trying to achieve?– Thomas Edwards
Nov 20 '18 at 9:57
Your code suggests that you want to hide the
js-comments every single time somebody clicks that element. Is that what you’re trying to achieve?– Thomas Edwards
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390347%2fhow-to-show-container-on-click-with-localstorage%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390347%2fhow-to-show-container-on-click-with-localstorage%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your code suggests that you want to hide the
js-commentsevery single time somebody clicks that element. Is that what you’re trying to achieve?– Thomas Edwards
Nov 20 '18 at 9:57
What exactly are you trying to achieve? I assume you want to toggle the visibility? (and save the state so it is retained beyond page loads?)
– Chris G
Nov 20 '18 at 9:57
please provide some html snippet also or describe elements
– Rahul Dudharejiya
Nov 20 '18 at 9:58
Why do you need two different classes for this? There is no third state, so one class that makes an element go into the opposite of the default state should do for most use cases.
– misorude
Nov 20 '18 at 10:07
`<div class="comments"> <button class="comments__button" id="js-comments">Load comments</button> <div class="comments__inner post__inner" id="js-comments__inner"> <h3 class="h4">Comments</h3> </div> </div> </div>
– bodanus7
Nov 20 '18 at 10:57