Advertisement
Guest User

Untitled

a guest
Apr 19th, 2014
46
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.11 KB | None | 0 0
  1. <div>
  2. <a href='#' id='link1' onclick='toggle(this)'>link 1</a>
  3. <a href='#' id='link2' onclick='toggle(this)'>link 2</a>
  4. <a href='#' id='link3' onclick='toggle(this)'>link 3</a>
  5. <a href='#' id='link4' style='display:none' onclick='toggle(this)'>link 4</a>
  6. </div>
  7.  
  8. var disp = false;
  9.  
  10. function toggle(el) {
  11. if (disp) {
  12. if (el.id == 'link4') {
  13. document.getElementById('link4').style.display='none';
  14. disp = false;
  15. }
  16. } else {
  17. if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) {
  18. document.getElementById('link4').style.display='block';
  19. disp = true;
  20. }
  21. }
  22. }
  23.  
  24. var disp = false;
  25.  
  26. function toggle(el) {
  27. if (disp) {
  28. if (el.id == 'link4') {
  29. $('#link4').fadeOut();
  30. disp = false;
  31. }
  32. } else {
  33. if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) {
  34. $('#link4').fadeIn();
  35. disp = true;
  36. }
  37. }
  38. }
  39.  
  40. var 3rdLink = $("#3rdLinkId"),
  41. 4thLink = $("#4thLinkId"); //just good practice
  42. 3rdLink.on('click', function(event){
  43. event.preventDefault(); //just in case it's a hyperlink
  44. 4thLink.css('visibility', 'visible');
  45. )};
  46.  
  47. <a href="#" class="show" onclick="show4()" >link 1</a>
  48. <a href="#" class="show" onclick="show4()" >link 2</a>
  49. <a href="#" class="show" onclick="show4()" >link 3</a>
  50. <a href="#" id="link4" class="hide" onclick="hide4()" >link 4</a>
  51.  
  52. <style>
  53. .hide {display: none;}
  54. .show {display: block;}
  55. </style>
  56. <script>
  57. function show4()
  58. {
  59. document.getElementById('link4').style.display = "block";
  60. }
  61. function hide4()
  62. {
  63. document.getElementById('link4').style.display = "none";
  64. }
  65. </script>
  66.  
  67. <div id="link-container">
  68. <a href="#">link1</a>
  69. <a href="#">link2</a>
  70. <a href="#">link3</a>
  71. <a href="#">link4</a>
  72. </div>
  73.  
  74. #link-container a:last-child{display:none}
  75.  
  76. $(function(){
  77. $('#link-container').on('click', 'a',function(e){
  78. var $t = $(this),
  79. $last = $t.siblings('a').addBack().last();
  80. if($last[0] != this){
  81. $last.toggle();
  82. }
  83. });
  84. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement