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>

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

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

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...

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

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

Hi pallone,

I think Matt has a point when he said: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: 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.

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

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

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>