Click to show more - maybe JS?

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

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>

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

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()
})})

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'

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 :)

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.

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";
}

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.