Reveal and Remove on Demand

User Overview Recap

When you tapped the image, this content was revealed. Do the same for other images on this page.

To remove the content, tap the image.

That's how it works.

Implementation Overview

There are three parts to the implementation.

1. The JavaScript. There are three places to customize the JavaScript: (i) The minimum height for the content div. (ii) The URL of the "open the div" image. And (iii) The URL of the "close the div" image.

   Details will be discussed with the code, further down.

2. The CSS. While the CSS could be inline, defining class names in a stylesheet or between script tags is likely to be easier for future maintenance.

3. The Content. The content is web page content in a div that is revealed when the "open the div" image is tapped (and removed when the "close the div" image is tapped). You may have as many content sections as you wish on your page.

Each part is addressed separately below. Then, code is presented with all the sections integrated.

The JavaScript

Put the JavaScript anywhere on the page that JavaScript can run. Or pull it in from an external file.

Notes follow the source code.

<script>
function ChangeDivHeight(imagenode,skipnode)
{
   var MinimumHeightPixels = 30;
   var OpenTheDivImageURL = "https://www.willmaster.com/possibilities/images/plusminusPlus.png";
   var CloseTheDivImageURL = "https://www.willmaster.com/possibilities/images/plusminusMinus.png";
   var contentnode = imagenode.parentNode;
   if( skipnode )
   {
      for(var i=0;i<skipnode;i++) { contentnode = contentnode.parentNode; }
   }
   if( parseInt(contentnode.style.height) > MinimumHeightPixels )
   {
      contentnode.style.height = MinimumHeightPixels+"px";
      imagenode.src = OpenTheDivImageURL;
   }
   else
   {
      contentnode.style.height = contentnode.scrollHeight+"px";
      imagenode.src = CloseTheDivImageURL;
   }
}
</script>

Notes —

1. Replace 30 with the number of pixels that shall always be visible at the top of the content div. This is where the "open the div" and the "close the div" images will show through. There needs to be enough space for the images to be tapped. (Generally, also a headline would show through, but that is optional.)

2. Replace https://www.willmaster.com/possibilities/images/plusminusPlus.png with the URL of the image to display as the "open the div" image to be tapped. You have permission to copy the image used in these instructions, but do serve them from your own server rather than from the Willmaster.com server.

3. Replace https://www.willmaster.com/possibilities/images/plusminusMinus.png with the URL of the image to display as the "close the div" image to be tapped. As with the other image, you have permission to copy it and upload it to your server.

When the edits are done, the code is ready for your web page.

The CSS

Put the CSS in your site's CSS style sheet or on the page where you are implementing this Reveal and Remove on Demand system. Notes follow the source code.

<style>
.height-adjust-div {
   height:30px; 
   transition-property:height; 
   transition-duration:1s;
   overflow:hidden;
   margin-bottom:1em;
}
.plus-minus-image { 
   width:22px; 
   height:auto; 
   border:none; 
   outline:none; 
   cursor:pointer; 
}
</style>

Notes —

The height-adjust-div class applies to the content container. The height property specifies the minimum height for the div with the content. The transition-duration:1s; declaration tells the browser to use up 1 second when changing the height of the content div. That time may be changed to 2s for two seconds or change to any other duration.

The overflow:hidden; declaration is required. Other declarations may be added for the height-adjust-div class.

The plus-minus-image class applies to the "open the div" and "close the div" images. As with the earlier class, additional declarations may be added. And current declaration values may be changed.

The Content

Here is a template for the content div. Use as many of these as you need for your web page.

Notes follow the template.

<div class="height-adjust-div">

<p style="margin-top:0;">
<img 
   class="plus-minus-image" 
   onclick="ChangeDivHeight(this,1)" 
   src="https://www.willmaster.com/possibilities/images/plusminusPlus.png"
   alt="open-close image">
<span style="vertical-align:top;">A Headline</span>
</p>

[The container's content]

</div>

Notes —

The container that holds the content is a div with class="height-adjust-div". If you wish to change the class name, also change it in the CSS presented earlier.

The clickable image and the headline are in a paragraph tag. It doesn't have to be a paragraph tag — it doesn't need to be in any tag at all, or it can be in several levels of tags.

The img tag's clickable image class name is plus-minus-image. If you wish to change the class name, also change it in the CSS presented earlier.

The onclick attribute in the img tag calls the JavaScript function ChangeDivHeight. If you wish to change the function name, also change it in the JavaScript presented earlier.

The ChangeDivHeight has two parameters. The first parameter is the word this (no quotation marks). The second parameter is a number representing how many tags are between the img tag and the container that holds the content. In the example, the number is 1 because the img tag is inside a p tag and no other tags.

If there were no tags to hold the img tag, then the number would be 0. And if there were more than one tag (within a p and then a span, for example), then the number for the second parameter would be the number of tags.

The src attribute's value is the URL of the "open the div" image.

Use one of these templates for each content block you want to enable with the Reveal and Remove on Demand system.

Integrated Source Code

Here is source code for each of the above three parts. Copy and paste into a test page to see it work.

<style>
.height-adjust-div {
   height:30px; 
   transition-property:height; 
   transition-duration:1s;
   overflow:hidden;
   margin-bottom:1em;
}
.plus-minus-image { 
   width:22px; 
   height:auto; 
   border:none; 
   outline:none; 
   cursor:pointer; 
}
</style>


<div class="height-adjust-div">

<p style="margin-top:0;">
<img 
   class="plus-minus-image" 
   onclick="ChangeDivHeight(this,1)" 
   src="https://www.willmaster.com/possibilities/images/plusminusPlus.png"
   alt="open-close image">
<span style="vertical-align:top;">A Headline</span>
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis vel augue ornare venenatis. Morbi ultricies augue urna, faucibus mollis mi feugiat vel. Proin volutpat blandit urna, tincidunt tristique purus blandit ut. Suspendisse et purus non arcu volutpat sagittis. Sed quis consectetur ante. Maecenas elementum feugiat eget sit amet turpis. Sed ut nisl et dolor posuere urna vel nibh tempor, in sagittis ligula fringilla.
</p>
<p>
Aliquam vel commodo lacus. Sem eros vestibulum lacus, ac interdum quam nunc at est. Donec porttitor et nibh et ullamcorper.
</p>
<p>
Sed ut nisl et dolor posuere feugiat eget sit amet turpis.
</p>

</div>


<div class="height-adjust-div">

<p style="margin-top:0;">
<img 
   class="plus-minus-image" 
   onclick="ChangeDivHeight(this,1)" 
   src="https://www.willmaster.com/possibilities/images/plusminusPlus.png"
   alt="open-close image">
<span style="vertical-align:top;">Another Headline</span>
</p>

<p>
Aliquam vel commodo lacus. Sem eros vestibulum lacus, ac interdum quam nunc at est. Donec porttitor et nibh et ullamcorper.
</p>
<p>
Morbi ultricies augue urna, faucibus mollis mi feugiat vel. Proin volutpat blandit urna, tincidunt tristique purus blandit ut. Suspendisse et purus non arcu volutpat sagittis. Sed quis consectetur ante. Maecenas elementum feugiat eget sit amet turpis. Sed ut nisl et dolor posuere urna vel nibh tempor, in sagittis ligula fringilla.
</p>
<p>
Sed ut nisl et dolor posuere feugiat eget sit amet turpis.
</p>

</div>


<script>
function ChangeDivHeight(imagenode,skipnode)
{
   var MinimumHeightPixels = 30;
   var OpenTheDivImageURL = "https://www.willmaster.com/possibilities/images/plusminusPlus.png";
   var CloseTheDivImageURL = "https://www.willmaster.com/possibilities/images/plusminusMinus.png";
   var contentnode = imagenode.parentNode;
   if( skipnode )
   {
      for(var i=0;i<skipnode;i++) { contentnode = contentnode.parentNode; }
   }
   if( parseInt(contentnode.style.height) > MinimumHeightPixels )
   {
      contentnode.style.height = MinimumHeightPixels+"px";
      imagenode.src = OpenTheDivImageURL;
   }
   else
   {
      contentnode.style.height = contentnode.scrollHeight+"px";
      imagenode.src = CloseTheDivImageURL;
   }
}
</script>

Testing

It's actually quite simple to test the code.

Pop it into a web page with .html or .htm file name extension. Drag the page into your browser. (The page does not have to be on your server for testing.)