Have Geek Brain

Click to show more - JS perhaps?

I'm not sure what language or how to do this, but I want the word to be on the page and when clicked it will expand below. If it is pressed again, will this stuff disappear again? Any ideas?

+2


a source to share


8 answers


Basically, you will need to manage the display

CSS property of the element that should 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>
+8


a source


I would recommend javascript and use the jQuery.show () and .hide () methods:

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



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

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

+3


a source


you can do it with jQuery, here is a usage example:

http://jsfiddle.net/8sDLg/

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


a source


Place the material in div

with style display:none;

. In a onClick

word handler (could be a link or a button), switch the display style between ''

(which means "default") and'none'

+1


a source


I created a demo for you here

You can use jQuery 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;
  });
});

Apparently slideToggle()

does the trick for you :)

+1


a source


Executive summary : use a plugin framework

Long version :

You can use javascript - rather, in conjunction with a javascript framework like jQuery. This includes adding a click handler to a word (actually a span tag around it) and the ability to extract additional information to show as a tooltip - there are many plugins for that. Search for "jquery hint" here or using google: here's one example .

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

0


a source


A quick idea of ​​how to do this while avoiding the JS solution. I'm using jQuery here because it's quicker to embed, but as I mentioned above, if that's your only JS functionality, it will only add a cumbersome file for some trivial additions.

<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 can see, HTML is completely self-contained. Only if JavaScript is supported is the "more" link added and the additional content hidden so that non-JS users can still read the entire text and not have any unnecessary "more" link.

0


a source


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


a source






More articles:


All Articles