Website Development Resources
CHouseLive

Show / Hide text

  1. Everyone has heard it but no one has ever seen it, and it only speaks when spoken to. What is it?

    An echo.

  2. I end the race. I am the beginning of the end. The start of eternity and the end of space. There are two of me in Heaven and one in hell. I am in water, fire, sunshine and darkness. I am the beginning of earth and the end of life. What am I?

    The letter E.

  3. There was a green house. Inside the green house there was a white house. Inside the white house there was a red house. Inside the red house there were lots of babies.

    This is a watermelon.

  4. An old man wanted to leave all of his money to one of his three sons but he didn't know which one he should give it to. He gave each of them a few coins and told them to buy something that would be able to fill their living room. The first man bought straw but there was not enough to fill the room. The second bought some sticks but they still did not fill the room. The third man bought two things that filled the room so he obtained his father's fortune. What were the two things that the man bought?

    The wise son bought a candle and a box of matches. After lighting the candle, the light filled the entire room.

Andy Langton's show/hide/mini-accordion is a brilliant little jQuery script which allows users to hide and show text on a web page.

The script allows for single paragraphs to be hidden or entire divs, requiring only that the class toggle is applied to the content which must be hidden.

In the event that JavaScript is disabled, all text is visible.

<ol class="question">
  <li>
    <p>Display text</p>
    <p class="toggle">Hidden Text</p>
  </li>
  <li>
    <p>Display text</p>
    <p class="toggle">Hidden Text</p>
  </li>
  <li>
    <p>Display text</p>
    <p class="toggle">Hidden Text</p>
  </li>
  <li class="last">
    <p>Display text</p>
    <p class="toggle">Hidden Text</p>
  </li>
</ol>
ol.question {
  margin: 20px 0;
  background: #990000;
  padding: 0 0 0 35px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

ol.question li {
  margin: 0;
  padding: 15px;
  color: #fff;
  font-size: 1.7em;
  font-weight: bold;
  border-top: 1px solid #990000;
  border-right: 1px solid #990000;
  background: #fff;
}

ol.question li.last {
  border-bottom: 1px solid #990000;
}

ol.question li p {
  font-size: 0.7em;
  font-weight: normal;
  line-height: 1.6em;
  color: #1F1F1F;
  padding: 0;
  margin: 0;
}

ol.question li .toggle {
  padding: 5px 0;
  margin-top: 10px;
  border-top: 1px dashed #990000;
  color: #000;
}

a.toggleLink{
  text-decoration: none;
}

a.toggleLink:hover{
  text-decoration: underline;
}
  1. Attach the JQuery library

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    You can also download your own copy of the JQuery library.

  2. Attach Andy Langton's show/hide/mini-accordion script

    // Andy Langton's show/hide/mini-accordion - updated 23/11/2009
    // Latest version @ http://andylangton.co.uk/jquery-show-hide
    
    // this tells jquery to run the function below once the DOM is ready
    $(document).ready(function() {
    
    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText='Reveal Answer';
    var hideText='Hide';
    
    // initialise the visibility check
    var is_visible = false;
    
    // append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.toggle').prev().append(' 
    '+showText+''); // hide all of the elements with a class of 'toggle' $('.toggle').hide(); // capture clicks on the toggle links $('a.toggleLink').click(function() { // switch visibility is_visible = !is_visible; // change the link depending on whether the element is shown or hidden $(this).html( (!is_visible) ? showText : hideText); // toggle the display - uncomment the next line for a basic "accordion" style //$('.toggle').hide();$('a.toggleLink').html(showText); $(this).parent().next('.toggle').toggle('slow'); // return false so any link destination is not followed return false; }); });

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org