By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,692 Members | 1,693 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,692 IT Pros & Developers. It's quick & easy.

hide/show the block of data using JavaScript

P: 3
I am trying to implement the hide/show functionality in one of the sharepoint page.

example: there are few block of data in a page..i want to have a two links say link1 and link2. when i click on link1 the block1 data should display and block2 data should hide..similarly when i click on link2 block2 data should display and block1 data should hide.

how to achieve this using javascript code.

thanks
Jan 8 '13 #1

✓ answered by Frinavale

Then hide them:
Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.  
  3. function toggleElement(id)
  4. {
  5.    document.getElementById('a1').style.display = 'none';
  6.    document.getElementById('a2').style.display = 'none';
  7.    document.getElementById('a3').style.display = 'none';
  8.  
  9.    document.getElementById(id).style.display = 'block';
  10.  
  11. }
  12. </script>
-Frinny

Share this Question
Share on Google+
4 Replies


Frinavale
Expert Mod 5K+
P: 9,731
Well it's a matter of catching the click event for the Link and the setting the style of the block to display:none or display:block.

Are you responsible for the code for the aspx page that you are displaying? Or are you trying to add on to someone else's page?

-Frinny
Jan 8 '13 #2

P: 3
Expand|Select|Wrap|Line Numbers
  1. <html><body><script>
  2.  
  3. function toggleElement(id)
  4. {
  5.     if(document.getElementById(id).style.display == 'none')
  6.     {
  7.         document.getElementById(id).style.display = '';
  8.     }
  9.     else
  10.     {
  11.         document.getElementById(id).style.display = 'none';
  12.     }
  13. }
  14. </script>
  15.  
  16. <p>
  17. <a href="javascript:toggleElement('a1')">link1</a>
  18. </p>
  19. <div id="a1" style="display:none">
  20. link1 data
  21. </div>
  22. <p>
  23. <a href="javascript:toggleElement('a2')">link2</a>
  24. </p>
  25. <div id="a2" style="display:none">
  26. link2 data
  27. </div>
  28.  
  29. <p>
  30. <a href="javascript:toggleElement('a3')">link3</a>
  31. </p>
  32. <div id="a3" style="display:none">
  33. link3 data
  34. </div>
  35.  
  36. </body>
  37. </html>
  38.  
This is the code that i have made so far. Now what I want is that when I click on link1,the link2 and link3 data should hide..similarly when I click on link2, link2 data should display and link1 and link3 data should hide...
Jan 10 '13 #3

Frinavale
Expert Mod 5K+
P: 9,731
Then hide them:
Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.  
  3. function toggleElement(id)
  4. {
  5.    document.getElementById('a1').style.display = 'none';
  6.    document.getElementById('a2').style.display = 'none';
  7.    document.getElementById('a3').style.display = 'none';
  8.  
  9.    document.getElementById(id).style.display = 'block';
  10.  
  11. }
  12. </script>
-Frinny
Jan 10 '13 #4

P: 3
This works. Thank you so much for your help.
Jan 11 '13 #5

Post your reply

Sign in to post your reply or Sign up for a free account.