Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 27th, 2007, 04:35 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default HIDE/SHOW

Hi,

Below I have a navigation system built using UL and LI. I have three categories as follows:

Basic Reporting
Filtering Reports
Customized Formatting

When I click on one of them I would like to hide the UL node with all its LI nodes. Then if I click again I would like to show the UL that is hidden. I would like to create a toggle.

Let's say that we click on the first category - Basic Reporting. I would have to hide only the UL and its descendants that are child of this category but not the others. However, please note that the ULs have not ids.

Is it possible to do that using the parent/child relationship?

I would appreciate if someone could post some sample code.

Cheers

<div id="navigation">[list]
 <li>
 <a id="ctl00_lnkHome" href="../Default.aspx">Home</a>
    <li>
       Basic Reporting
       [list]
         <li>
           <a id="ctl00_menu_ctl00_Repeater1_ctl01_HyperLink1" href="/DataTutorial/BasicReporting/SimpleDisplay.aspx">Simple Display</a>
         </li>
         <li>
            <a id="ctl00_menu_ctl00_Repeater1_ctl02_HyperLink1" href="/DataTutorial/BasicReporting/DeclarativeParams.aspx">Declarative Parameters</a>
         </li>
         <li>
           <a id="ctl00_menu_ctl00_Repeater1_ctl03_HyperLink1" href="/DataTutorial/BasicReporting/ProgrammaticParams.aspx">Setting Parameter Values</a>
         </li>
       </ul>
    </li>
    <li>
      Filtering Reports
    [list]
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl01_HyperLink1" href="/DataTutorial/Filtering/FilterByDropDownList.aspx">Filter by Drop-Down List</a>
      </li>
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl02_HyperLink1" href="/DataTutorial/Filtering/MasterDetailsDetails.aspx">Master-Details-Details</a>
      </li>
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl03_HyperLink1" href="/DataTutorial/Filtering/DetailsBySelecting.aspx">Details of Selected Row</a>
      </li>
    </ul>
  </li>
  <li>
   Customized Formatting
  [list]
  <li>
    <a id="ctl00_menu_ctl02_Repeater1_ctl01_HyperLink1" href="/DataTutorial/CustomFormatting/CustomColors.aspx">Format Colors</a>
  </li>
     <li>
       <a id="ctl00_menu_ctl02_Repeater1_ctl02_HyperLink1" href="/DataTutorial/CustomFormatting/GridViewTemplateField.aspx">Custom Content in a GridView</a>
     </li>
     <li>
        <a id="ctl00_menu_ctl02_Repeater1_ctl03_HyperLink1" href="/DataTutorial/CustomFormatting/DetailsViewTemplateField.aspx">Custom Content in a DetailsView</a>
    </li>
    <li>
      <a id="ctl00_menu_ctl02_Repeater1_ctl04_HyperLink1" href="/DataTutorial/CustomFormatting/FormView.aspx">Custom Content in a FormView</a>
    </li>
    <li>
      <a id="ctl00_menu_ctl02_Repeater1_ctl05_HyperLink1" href="/DataTutorial/CustomFormatting/SummaryDataInFooter.aspx">Summary Data in Footer</a>
    </li>
     </ul>
    </li>
  </li>
</ul>
</div>
Reply With Quote
  #2 (permalink)  
Old March 28th, 2007, 04:18 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi,

I would appreciate if someone could help me to figure out how to do that. If my explanation is not clear, I will try again.

Cheers
Reply With Quote
  #3 (permalink)  
Old March 28th, 2007, 06:30 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

It sounds like you are wanting to re-create the wheel. This is not a bad thing, good on you for trying however there are many heirachial navigation systems out there which are already cross browser compatible.

This confused me:
;;;When I click on one of them I would like to hide the UL node with all its LI nodes.
Why would you hide the UL, wouldnt you show/hide just the children of the clicked link which is the UL, isnt it?

Would it be safe to assume you wish for functionality like the windows file system explorer works? If so, IMO you should do some reaseach on Goggle for heirachial navigation, try to impliment it and post problematic code. I doubt anybody here will write it for you.

Wind is your friend
Matt
Reply With Quote
  #4 (permalink)  
Old March 29th, 2007, 05:55 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Matt,

Well, I would know how to write the code for this if the UL I want to hide had an id. But it doesn't and that is it.

Since in this case I do not have an id, I asked for some help on how to achieve this using a parent/child relationship. So if you click on Basic Reporting for instance, the code would hide the UL child of this node and not the others

I have not asked anyone to write the code for me. I just asked for some sample code since I have never done that using a parent/child relationship.

People use this forum to learn and share their knowledge.

If you do not want to share your knowledge, why are you a member in firt place? Also, I do not understand why you bothered to waste your time to write such a silly reply...
Reply With Quote
  #5 (permalink)  
Old March 29th, 2007, 06:30 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

I know what forums are about. I get help here and have spent alot of time over the years assisting others. You should answer questions when somebody takes the time to write them. The ones I asked were in aid of assiting you. Good luck with your problem, as you clearly wish i will refrain from assisting you. Have a fne day...

Wind is your friend
Matt
Reply With Quote
  #6 (permalink)  
Old March 30th, 2007, 07:23 PM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Mat41,

First of all I did not say I wished you refrained from assisting me. The reason why I wrote to this forum is because I want to learn and be assisted by its member.

It is not very nice though when someone replies like that:

"I doubt anybody here will write it for you."

I am sorry if there was a misunderstanding

Cheers
Reply With Quote
  #7 (permalink)  
Old March 31st, 2007, 01:40 AM
Imar's Avatar
Wrox Author
Points: 72,055, Level: 100
Points: 72,055, Level: 100 Points: 72,055, Level: 100 Points: 72,055, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,086
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi pallone,

I think Matt has a point when he said:
Quote:
quote:I doubt anybody here will write it for you.
I don't think you should take this as a rude comment, but as a truism.

If you want to learn, you have to read, Google, experiment, debug, think, analyze, and read and Google some more.

So, when you have a programming problem, come to this site and post this question:
Quote:
quote:I would appreciate if someone could post some sample code.
people may get the impression that you forgot to do a few of the things in the list above.

Except for a few exceptions, most people on this forum won't post complete code examples for you. However, they will help you to get you started, or get you in the right direction.

You may want to read the following article to get a better understanding of why you sometimes get responses like this on a post:

http://www.catb.org/~esr/faqs/smart-questions.html

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.
Reply With Quote
  #8 (permalink)  
Old April 3rd, 2007, 12:50 PM
Authorized User
 
Join Date: Mar 2006
Location: Chennai, Tamil Nadu, India.
Posts: 32
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Raghunathan
Default

hi,

here is the full working HTML Code for the problem that u've asked.(Works Fine with Firefox 2.0 and IE 6.0 )

i've add some style sheets and javascripts to the code which you have posted and completed the problem ..

hope it will solve ur problem too...

=== SOURCE CODE LISTINGS =====================================
<html>
<head>
<style>
  .clsPara { cursor:hand; text-decoration:underline; color:darkgreen; }
</style>
<script>
    function hideShow(LinkObject)
    {
        var ULTag = LinkObject.nextSibling.nextSibling;
        if ( ULTag.style.display == 'block' )
            ULTag.style.display = 'none';
        else
            ULTag.style.display = 'block';
    }
</script>
</head>
<body>

<div id="navigation">[list]
 <li>
 <a id="ctl00_lnkHome" href="../Default.aspx">Home</a>
    <li>
      <span class="clsPara" onclick="javascript:hideShow(this);"> Basic Reporting</span>
       <ul style="display:none">
         <li>
           <a id="ctl00_menu_ctl00_Repeater1_ctl01_HyperLink1" href="/DataTutorial/BasicReporting/SimpleDisplay.aspx">Simple Display</a>
         </li>
         <li>
            <a id="ctl00_menu_ctl00_Repeater1_ctl02_HyperLink1" href="/DataTutorial/BasicReporting/DeclarativeParams.aspx">Declarative

Parameters</a>
         </li>
         <li>
           <a id="ctl00_menu_ctl00_Repeater1_ctl03_HyperLink1" href="/DataTutorial/BasicReporting/ProgrammaticParams.aspx">Setting Parameter

Values</a>
         </li>
       </ul>
    </li>
    <li>
     <span class="clsPara" onclick="javascript:hideShow(this);">Filtering Reports</span>
    <ul style="display:none">
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl01_HyperLink1" href="/DataTutorial/Filtering/FilterByDropDownList.aspx">Filter by Drop-Down List</a>
      </li>
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl02_HyperLink1" href="/DataTutorial/Filtering/MasterDetailsDetails.aspx">Master-Details-Details</a>
      </li>
      <li>
        <a id="ctl00_menu_ctl01_Repeater1_ctl03_HyperLink1" href="/DataTutorial/Filtering/DetailsBySelecting.aspx">Details of Selected Row</a>
      </li>
    </ul>
  </li>
  <li>
   <span class="clsPara" onclick="javascript:hideShow(this);"> Customized Formatting</span>
  <ul style="display:none">
  <li>
    <a id="ctl00_menu_ctl02_Repeater1_ctl01_HyperLink1" href="/DataTutorial/CustomFormatting/CustomColors.aspx">Format Colors</a>
  </li>
     <li>
       <a id="ctl00_menu_ctl02_Repeater1_ctl02_HyperLink1" href="/DataTutorial/CustomFormatting/GridViewTemplateField.aspx">Custom Content in a

GridView</a>
     </li>
     <li>
        <a id="ctl00_menu_ctl02_Repeater1_ctl03_HyperLink1" href="/DataTutorial/CustomFormatting/DetailsViewTemplateField.aspx">Custom Content

in a DetailsView</a>
    </li>
    <li>
      <a id="ctl00_menu_ctl02_Repeater1_ctl04_HyperLink1" href="/DataTutorial/CustomFormatting/FormView.aspx">Custom Content in a

FormView</a>
    </li>
    <li>
      <a id="ctl00_menu_ctl02_Repeater1_ctl05_HyperLink1" href="/DataTutorial/CustomFormatting/SummaryDataInFooter.aspx">Summary Data in

Footer</a>
    </li>
     </ul>
    </li>
  </li>
</ul>
</div>

</body>
</html>

Regards,
Raghu
Reply With Quote
  #9 (permalink)  
Old April 16th, 2007, 05:21 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Raghunathan,

Many thanks for you help.

I am sorry I took so long to thank you for your help. But I was so disappointed with some of the replies I got from some members that I was away for a while and have seen your post only now.

I will try it and let you know how a get on.

Cheers

CPALL
Reply With Quote
  #10 (permalink)  
Old April 16th, 2007, 08:11 AM
Friend of Wrox
Points: 1,243, Level: 13
Points: 1,243, Level: 13 Points: 1,243, Level: 13 Points: 1,243, Level: 13
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2003
Location: , , United Kingdom.
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default

Hi Raghu,

I have tried the sample code you posted but there is a problem when posting back to the server. The menu works fine until the server returns the result.

When I click on one of the menus the javascript function is being called and set the style display to block. However, because there is a post back to get the link url

(please note I am using ASP.NET <asp:HyperLink onclick="javascript:hideShow(this)" runat="server" NavigateUrl='<%# Eval("url") %>' EnableViewState="false"><%# Eval("title") %></asp:HyperLink>)

the menu is hidden again.

I have trid to remove the link from the parent and then the menu works but as soon as I click the child subMenu the postback happens and the Meny is hidden again. Do you have any ideas of how to solve this?

Cheers

This is the code that builds that MENU

<div id="navigation">
                [list]
                    <li>
                        <asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>

                    <asp:Repeater EnableViewState="False" ID="menu" runat="server" DataSourceID="SiteMapDataSource1">
                        <ItemTemplate>
                            <li>
                                <asp:HyperLink onclick="javascript:hideShow(this)" runat="server" NavigateUrl='<%# Eval("url") %>' EnableViewState="false"><%# Eval("title") %></asp:HyperLink>

                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                                    <HeaderTemplate>
                                        <ul style="display:none">
                                    </HeaderTemplate>

                                    <ItemTemplate>
                                        <li>
                                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
                                        </li>
                                    </ItemTemplate>

                                    <FooterTemplate>
                                        </ul>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                        &nbsp;

                    </li>
                 </ul>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
            </div>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Hide/Show Desktop icons jpool Visual Basic 2005 Basics 0 July 27th, 2008 02:47 PM
how to show/hide forms ? ashrafzia C# 3 November 3rd, 2006 11:07 AM
hide/show header with javascript crmpicco Javascript How-To 2 April 10th, 2006 03:45 AM
show/hide row(s) eugz Beginning PHP 0 March 19th, 2006 10:10 PM



All times are GMT -4. The time now is 04:37 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.