Change <div> content

areed24 · April 19th, 2009, 10:21 PM

I have three images on my webpage that comprise an small interface. When the page loads, the first picture is in focus and to the right is an explaination. When the user clicks on a different picture, I would like to change the text of the div. I have tried adding code to the code behind page, but I can't figure out how to make that work. I am new to this and am getting my hands around the VB coding. Any direction would greatly help.

gbianchi · April 20th, 2009, 07:53 AM

Hello, Unless you show us something, I don't know how we can help you...

areed24 · April 20th, 2009, 09:49 PM

Sorry, this is what I have so far

Code:

<div id="Nav">
              <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="about.aspx" 
              <img alt="" src="Images/about.jpg" style="width: 171px; height: 28px" />
              </asp:HyperLink> 
              <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="prices.aspx" 
              <img alt="" src="Images/prices.jpg" style="width: 171px; height: 28px" />
              </asp:HyperLink> 
              <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="contact.aspx" 
              <img alt="" src="Images/contact.jpg" style="width: 171px; height: 28px" />
              </asp:HyperLink>               

</div>
<div id="ContentArea">
               <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"                
                TargetControlID="MoreInfo" 
                CollapseControlID="Less" 
                Collapsed="True"
                TextLabelID="More"
                SuppressPostBack="true" Enabled="True" 
                ExpandedImage="Images/blank.gif" 
                ExpandControlID="Image1" CollapsedImage="Images/more.gif" 
                ImageControlID="Image1">
                </cc1:CollapsiblePanelExtender>
            
               <div class="contentInfo1" runat="server">
     
             <p> This is all about us.
  </p>
      
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/more.gif" />
               </div>
              <div class="contentInfo2">    
              
  <asp:Panel ID="MoreInfo" runat="server" Class="moreInfo"> 
  
              <p> This is more about us. 
   <asp:Label ID="Less" runat="server" Text="[Less]" CssClass="link"></asp:Label>
       </p>
                </asp:Panel>
</div>

I would like to add the functionality that when the user clicks on the hyperlinks, the Content Area information changes depending on which Hyperlink they click. This is a small interface within the main page.

gbianchi · April 20th, 2009, 09:59 PM

Unless I'm missing something, your hyperlinks navigates to other pages, maybe you need a standard button??

Also, if you are using ajax (like I think because you have a collapsible panel), then the solution is at code behind, setting the image to the new link. (or you can do it with js at client side, but I don't know how).