Today, I was trying to flex a little bit my weak html/php/javascript muscle; I thought about upgrading my publication list with a show/hide link of citations to my work. As always, whenever I don't have a clue, Google came to the rescue! I found a quite helpful discussion at webdeveloper.com that takes advantage of the css style called display.
As you can see, the script in its simpler form takes two instructions. One is the declaration of a division containing the text that you want to hide/show, this division is declared with the display:block style:
The second part of the combo is a javascript that changes the display:block style to display:none:
You can see my publication list for the final result, just click on any of the Cited by links at some of the papers. You can also view the source of my webpage or drop me a comment in case of you need a little bit more help.
As you can see, the script in its simpler form takes two instructions. One is the declaration of a division containing the text that you want to hide/show, this division is declared with the display:block style:
<div id="new_div" style="display: block;">Here goes the text you want to hide/show</div>
The second part of the combo is a javascript that changes the display:block style to display:none:
<a href="#" onclick= "document.getElementById('new_div').style.display =(document.getElementById('new_div').style.display == 'block')?'none':'block';">Click to show/hide the div called "new_div"</a>
Tip Hat: David Harrison's post.
If you follow the webdeveloper.com discussion you will find a way to declare the script at the head section and shortens the command to be put at the a href tag. Also, you will find a post on how to make the divisions invisible at first load.
If you follow the webdeveloper.com discussion you will find a way to declare the script at the head section and shortens the command to be put at the a href tag. Also, you will find a post on how to make the divisions invisible at first load.
You can see my publication list for the final result, just click on any of the Cited by links at some of the papers. You can also view the source of my webpage or drop me a comment in case of you need a little bit more help.
No comments:
Post a Comment