Results 1 to 5 of 5

Thread: RESOLVED - (d)html & javascript: using "this" and elements...

  1. #1

    Thread Starter
    New Member
    Join Date
    Jan 2004
    Location
    London
    Posts
    10

    RESOLVED - (d)html & javascript: using "this" and elements...

    I have this javascript code:

    Code:
    <script type="text/javascript">
    function disp()
    {
    	n = document.getElementById('btwo');	
    	n.style.display=n.style.display=='block'?'none':'block';
    }
    </script>
    And this html:
    Code:
    <tr id="two">
    	<td><a href="javascript:void(0)" class="clink" onclick="disp()">Topic: Two</a>
    		<blockquote id="btwo" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>
    The bit in the blockquote is initially hidden, then when you click the link ("Topic: Two"), it shows the hidden bit (..toggles display style).

    I need to un-hardcode the 'btwo' in the script part...

    I tried using onclick="disp(this)" , but my knowledge of the DOM tree is pitiful...

    Any help / hints appreciated.
    Thanks
    Last edited by deeperdish; Apr 22nd, 2004 at 09:42 AM.

  2. #2
    Frenzied Member TomGibbons's Avatar
    Join Date
    Feb 2002
    Location
    San Diego, CA Previous Location: UK
    Posts
    1,345
    Code:
    <script type="text/javascript">
    function disp()
    {
    	n = document.getElementById('btwo');	
    	n.style.display = (n.style.display=='block')?'none':'block';
    	return false;
    }
    </script>
    
    <tr id="two">
    	<td><a href="#" class="clink" onclick="return disp()">Topic: Two</a>
    		<blockquote id="btwo" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>

  3. #3
    Frenzied Member Acidic's Avatar
    Join Date
    Sep 2003
    Location
    UK
    Posts
    1,090
    there could be a nextElement() type function which would work better, but I don't know of any such thing. so here's a party un-hardcoded change:
    Code:
    <script type="text/javascript">
    function disp(_obj)
    {
    	n = document.getElementById(_obj);	
    	n.style.display = (n.style.display=='block')?'none':'block';
    }
    </script>
    
    <tr id="two">
    	<td><a href="#" class="clink" onclick="disp('btwo')">Topic: Two</a>
    		<blockquote id="btwo" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>
    Have I helped you? Please Rate my posts.

  4. #4

    Thread Starter
    New Member
    Join Date
    Jan 2004
    Location
    London
    Posts
    10
    Yep, I suppose that code is neater, but it doesn't answer my question...

    The toggling of the blockquote display is not the problem, that works fine.

    The thing is: I have more rows in my table with similar code to the bit in my original post. I dont want to have the script part for each row in the table... Hope that clears thing up a bit more...

    Here's more code to illustrate my point further:

    Code:
    <tr id="one">
    	<td><a href="javascript:void(0)" class="clink"  onclick="disp()">Topic: One</a>
    		<blockquote id="bone" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>
    
    <tr id="two">
    	<td><a href="javascript:void(0)" class="courselink" onclick="disp()">Two</a>
    		<blockquote id="btwo" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>
    
    <tr id="three">
    	<td><a href="javascript:void(0)" class="clink" onclick="disp()">Topic: Three</a>
    		<blockquote id="bthree" class="DisplayNone">Some bumf about this topic</blockquote>
    	</td>
    </tr>
    I want to use the same script code to handle the toggling of the blockquote display....

  5. #5

    Thread Starter
    New Member
    Join Date
    Jan 2004
    Location
    London
    Posts
    10

    RESOLVED - (d)html & javascript: using "this" and elements...

    Thanks Acidic.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width