Hide and Reveal Content

• FAQ page: Hide the answers, which are revealed when the question is clicked. This makes it easier to find the questions your users need the answers to.
• Product or Service Features: On a product or service page, use the script to hide and reveal detailed information about specific product or service features.
• Image Gallery: Enhance an image gallery by hiding descriptions or captions initially, which are revealed by clicking on the images or a dedicated "tell me" button. This approach helps maintain a clean visual design while providing additional context as needed.
• Glossary or Definitions: Create a glossary page where users can click on terms to reveal the definitions or explanations.
• Testimonials or Reviews: Hide lengthy testimonials or reviews behind a "Read more" button, allowing users to reveal the full content if they're interested.
• Team Member Profiles: Display team member profiles with brief summaries initially, and reveal more details about their roles, experiences, or accomplishments when users click on their names or images.
• Privacy Policy and Terms of Service: Hide lengthy legal texts behind collapsible sections, making it easier for users to find specific sections they want to read.
• Instructions for a Game: If you have an online game or interactive experience, you can utilize the script to hide and reveal instructions, hints, or tips to guide players as they progress.
• Trivia, Riddles or Quizzes: Lets users ponder the question before clicking to see if they got the answer correct.

Hide Ideas

There are four parts to this feature. None are difficult. We'll start with the HTML. Here's the code:

<button class="bttn" data-target="#content1">Button Text</button>
<div id="content1" class="content">

Your content goes here. HTML is OK.

<button class="bttn" data-target="#content1">Close</button>
</div>

You can add as many hidden areas as you like. Each time you copy and paste the entire chunk of code, you just need to make one change to line 1 and line 6 (same bit of code), and one change to line 2. The code chunk in lines 1 and 6 that reads:

data-target="#content1

...needs updated with each new hidden area. Change #content1 to #content2 for the second hidden area, then #content3 for the third hidden area and so forth. Keeping raising the number for each successive hidden area. That distinguishes the hidden areas from each other so one link doesn't open all the hidden areas at once.

You also need to change id="content1" in line 2, to content2, content3, and so forth. Those numbers in lines 1, 2, and 6 all need to match. Easy enough if you don't forget!

That's all there to the HTML. Pretty easy, huh? You can close this section or leave it open as you move on to the CSS part. Your choice.

Close Section

The CSS is styles the button, adds padding in the content area, and dictates what happens when the button is clicked. For that last part, the lines above and below flash red when the link to open or close the division is clicked, then returns back to the original state.

Save a back up copy of the original CSS if you want to play around with the styles, and then experiment to your hearts content. That's how I come up with some of this stuff. Here's the CSS:

.bttn {
  margin: 0;
  background: white;
  text-size: 1.2vw;
  font-variant: small-caps;
  border-width: 1px 0;
  border-style: solid none;
  border-color: gray;
  padding: 3px 0;}

.content {
  padding: 15px 0 0 0;
  font-size: 1.3vw;}

.bttn:active,
.bttn.clicked {
  margin: 0;
  background: white;
  outline: none;
  border-width: 1px 0;
  border-style: solid none;
  border-color: red;
  padding: 3px 0;}

.bttn:not(:active),
.bttn.clicked {
  margin: 0;
  background: white;
  text-size: 1.2vw;
  font-variant: small-caps;
  border-width: 1px 0;
  border-style: solid none;
  border-color: gray;
  padding: 3px 0;}

Of course, you can always use the code just as you found it here. It's pretty nice as it is.

The Javascript is next. You'll only need to copy and paste this.

Close Section

Here's the Javascript code:

$(document).ready(function() {
  // Hide the content initially
  $(".content").hide();

  // When a button is clicked, toggle the associated content
  $(".bttn").click(function() {
    var target = $(this).data("target");
    $(this).addClass("clicked"); // Add the "clicked" class to the clicked button
    $(target).slideToggle();
  });
});

$(document).ready(function() {
  $("#myButton").click(function() {
    $(this).addClass("clicked");
  });
});

You shouldn't have to anything with that other than copying it and pasting it into an empty text file and saving it as hide-content.js. Then link to it in the <head> section of your page. Here's what the link should look like:

In that example the file is kept in a directory named js. Change the path to the actual location that you keep your Javascript files.

That's it for the Javascript. There's one last piece of code you need, and it's just a copy and paste link to the Jquery library. Paste the following code in the <head> section of your page along with the link to the Javascript file.

That's it. Several code bits going on but none of it very difficult. Happy hiding!

Close Section