Click to show more - maybe JS?

Question

I am not sure what language or how to do this, but I am looking to have a word on a page, and when clicked, it will reveal more underneath. If it is clicked again, that stuff will hide away again? Any ideas?

Answer 1

I'd recommend javascript and using jQuery .show() & .hide() methods:

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://www.learningjquery.com/2006/09/slicker-show-and-hide

Answer 2

Put the stuff in a div with style display:none;. In the onClick handler of the word (can be link or a button), toggle the display style between '' (which means 'default') and 'none'

Answer 3

I created a demo for you here.

You could use jQuery for that and make your life easy:

<a href="#" id="link">Show/Hide</a>
<div id="mydiv">Some content</div>

jQuery:

$(function(){
  $('#link').click(function(){
    $('#mydiv').slideToggle();
    return false;
  });
});

As can be seen, the slideToggle() does the trick there for you :)

Answer 4

Executive summary: use a framework plugin

Long version:

You could use javascript -- more likely in a combination with a javascript framework, like jQuery. This would involve adding a click handler to the word (actually a span tag around it) and having a way to retrieve the extra information to show as a tooltip -- there are plenty of plugins for this. Search for "jquery tooltip" here or using google: here's one example.

Alternatively, you could simply surround the word with the span tag and add a title attribute to the tag. Hovering over the word (actually the tag) would bring up the browser's default tooltip. This might be an easy way to get started with it -- in fact, this could be the start of the javascript solution. Using the tag for the click event and taking the data from the title attribute -- probably by storing the title in jQuery data on page load, then grabbing the text from the data on click so that you don't have a conflict with the browser's tool tip behavior. Many of the plugins operate this way.

Answer 5

you could do this with jQuery, here a ready to use example:

http://jsfiddle.net/8sDLg/

$(function() {$('div.more').hide()
  $('a.showmemore').click(function(){
  $(this).next('div').slideToggle()
})})

Answer 6

Basically, you will need to manipulate the display CSS property of the element to be hidden/revealed:

<span id="showHide">Show</span>
<div id="foo" style="display:none">Here is some text</div>

<script>
document.getElementById("showHide").onclick = function() {
    var theDiv = document.getElementById("foo");
    if(theDiv.style.display == 'none') {
        theDiv.style.display = 'block';
        this.innerHTML = 'Hide';
    } else {
        theDiv.style.display = 'none';
        this.innerHTML = 'Show';
    }
}
</script>

Answer 7

Quick idea how to do it when avoiding a JS-only solution. I'm using jQuery here, because it is faster to code in, but as I mentioned above, if this is your only JS functionality it would only add a heavy-weight file for some trivial extras.

<script type="text/javascript">
  jQuery(function() {
    $(".article .additional")
      .hide()
      .before("<a href='#'>")
      .prev()
        .text("more")
        .click(function() {
           $(this).next().toggle()
         })
  });
</script>

<div class="article">
  <h2>Some headline</h2>
  <p>Some intro text that is always visible</p>
  <div class="additional">
    <p>Some extra text that is hidden by JS</p>
    <p>But will stay visible if the visitor doesn't have JS</p>
  </div>
</div>

As you see, the HTML is completely stand-alone. Only if JavaScript is supported, a "more" link will be added and the additional content hidden, so that non-JS users still can read all the text and don't have an useless "more" link.

Answer 8

Another elegant approach using pure HTML and CSS without JavaScript.

HTML:

here goes text before 
<label class="details">
    <input type="checkbox" /><span>here come some details</span><em> </em>
</label> 
and after

CSS:

.details input,
.details span {
    display: none;
}
.details input:checked~span {
    display: inline;
    border-bottom: dotted 1px gray;
}
.details em:after {
    content: "show...";
}
.details input:checked~em:after {
    content: "...hide";
}