hide/show the block of data using JavaScript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • nidhidagar
    New Member
    • Jan 2013
    • 3
    #1

    hide/show the block of data using JavaScript

    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
    Tags: None
    • Frinavale
      Recognized Expert Expert
      • Oct 2006
      • 9749
      #2
      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

        Comment

        • nidhidagar
          New Member
          • Jan 2013
          • 3
          #3
          Code:
          <html><body><script>

function toggleElement(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}
</script>

<p>
<a href="javascript:toggleElement('a1')">link1</a>
</p>
<div id="a1" style="display:none">
link1 data
</div>
<p>
<a href="javascript:toggleElement('a2')">link2</a>
</p>
<div id="a2" style="display:none">
link2 data
</div>

<p>
<a href="javascript:toggleElement('a3')">link3</a>
</p>
<div id="a3" style="display:none">
link3 data
</div>

</body>
</html>
          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...
          Last edited by Meetee; Jan 10 '13, 09:16 AM. Reason: Use code tags <code/> around your code

            Comment

            • Frinavale
              Recognized Expert Expert
              • Oct 2006
              • 9749
              #4
              Then hide them:
              Code:
              <script type='text/javascript'>
 
function toggleElement(id)
{
   document.getElementById('a1').style.display = 'none';
   document.getElementById('a2').style.display = 'none';
   document.getElementById('a3').style.display = 'none';

   document.getElementById(id).style.display = 'block';
   
}
</script>
              -Frinny

                Comment

                • nidhidagar
                  New Member
                  • Jan 2013
                  • 3
                  #5
                  This works. Thank you so much for your help.

                    Comment

                    Previous template Next
                    Working...