Show/hide toggle content

JavaScript
1

I have this show/hide code. When the page opens (or is refreshed) the hide shows first. How can I make this code to work where the show doesn’t display until the link is clicked on?

```
<p><a href="#" onclick="toggleContent(); return false;">Click to toggle content</a></p>

<div id="content">
  <p>This is the content to show and hide.</p>
</div>

<script>
function toggleContent() {
  var content = document.getElementById("content");
  if (content.style.display === "none") {
    content.style.display = "block"; // Show content
  } else {
    content.style.display = "none"; // Hide content
  }
}
</script>

</body>
</html>

Thank you.

2

You can just add style="display: none;" to the HTML:

<div style="display: none;" id="content">

That way, the div starts off in the none state and can be switched to block display by the script.

1 Like
3

That’s too simple, thanks it worked! I appreciate your response. Thank you

1 Like
4

I should add that the solution above is just a “quick and dirty” solution to get the job done. A better approach is to get the script to initially add display: none. That way, the content isn’t hidden from users who aren’t using JS. (I know people poopoo the not-using-JS concept, but honestly, I turn off JS on hundreds of sites, as it’s mostly not useful and is just intrusive. So there will be people who don’t have access to your content if it’s hidden by default.)

2 Likes
5

You can have a add/remove a class that you hide and show in CSS. Similar to your Javascript, but a fewer lines of code…

document.getElementById("content").classList.toggle("hide")

.hide{
   display: none
}

I do avoid Javascript as plague if I can, but sometimes Javascript is the simplest way.

6

Here is a non-javascript solution…

index.html

<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>show and hide</title>

<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>

 <input id="cb" type="checkbox">
 <label id="open-element" for="cb">Click to</label>
 <div id="content">
  <p>This is the content to show and hide.</p>
</div>

</body>
</html>

screen.css

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5  arial, helvetica, sans-serif;
 }
#cb {
   position: absolute;
   left: -999em;
 }
#open-element {
   display: block;
   width: 11em;
   padding: 0.25em 0;
   margin: 1em;
   border: 1px solid #000;
   border-radius: 0.5em;
   box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
   background-color: #fff;
   background-image: linear-gradient(to bottom, #fff, #ccc);
   text-align: center;
   cursor: pointer;
 }
#cb:checked + #open-element:after {
   content: ' hide content';
 }
#cb:checked ~ #content {
   display: block;
 }
#open-element:after {
   content: ' toggle content';
 }
#content {
   display: none;
   padding: 0.5em 1em;
   margin: 1em;
   border: 1px solid #000;
   border-radius: 0.5em;
   box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
   background-color: #fff;
 }

You may see the result here…
Full Page View

2 Likes
7

Thank you. I will give that version a try.

1 Like
8

You can do that in CSS now.

@media (scripting: enabled) {
  h2 {
   display:none;
  }
}
7 Likes
9

Some further reading…

MDN - CSS media scripting

3 Likes
10

@Paul_Wilkins and others: Aren’t the stats where about 98% of all users, use JS? And is it true that many sites won’t operate correctly if JS is turned off?

Would be interested in you take on this.

Thank you

11

It’s probably worth caveating that on the idea that browsers have made Javascript part of their inbuilt structure and defaulted it to on; meaning it wasnt really an active choice by the user to “use” JS…

12

Those are bad sites, designed by people who missed the memo about progressive enhancement. I turn off JS on many sites (via a one-click browser add-on) because JS is used for a lot of intrusive cruft that just gets in the way of the content (newsletter popups etc.)

I would take stats on non-JS users with a grain of salt.

3 Likes
13

I also often have to turn JS off when I’m in Spain as the connection is so slow in our area that virtually no pages will load and nearly all time out before loaded. Not everyone has the benefit of a good connection.:slight_smile:

3 Likes