show/hide div using jquery and c#

Question

I am trying to show/hide three divs based on jquery using <a href="#id">. But the code is not working. The code works fine when I map using <a> link using rel attribute.

For example: <a rel="cat1" class="selected">

Default.aspx

<div id="featuredleftdiv">
    <script type="text/javascript">
        var featuredposts = new ddtabcontent("featuredposts")
        featuredposts.setpersist(true)
        featuredposts.setselectedClassTarget("link")
        featuredposts.init(10000)
    </script>

    <ul id="featuredposts" class="featuredposts">
        <li><a href="#cat1" class="menu">a</a></li>
        <li><a href="#cat2" class="menu">b</a></li>
    </ul>

    <div class="clear"></div>

    <div id="cat1" class="featuredposts_content">
        <asp:UpdatePanel ID="UpdatePanel4" runat="server"> 
            <ContentTemplate>
                <asp:ListView ID="ListView4" runat="server" GroupItemCount="1" OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>  

    <div id="cat2" class="featuredposts_content">
        <asp:UpdatePanel ID="UpdatePanel5" runat="server"> 
            <ContentTemplate>
                <asp:ListView ID="ListView5" runat="server" GroupItemCount="1"  OnPagePropertiesChanging="ListView4_PagePropertiesChanging"></asp:ListView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

JQuery

In Head section of html

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
</script>

what do you mean by "the code is not working", please try to explain the problem you are facing. — Simon Martin
– Simon Martin, Commented Dec 21, 2012 at 16:56
@lante - it's to tell which div id to show from the href...basically it's saying $('#cat1').show(); — Jamie R Rytlewski
– Jamie R Rytlewski, Commented Dec 21, 2012 at 17:01

Reinstate Monica Cellio · Accepted Answer · 2012-12-21 17:07:21Z

1

You're assigning event handlers before the elements exist on the page. Change the script in the head section to this...

<script type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function() {
        $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
    });
</script>

The $(function() { }) code makes your script run when the document is ready, or when all the elements have been created.

answered Dec 21, 2012 at 17:07

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sunny Over a year ago

But OP mentioned it works with "rel", so it should have same effect, i.e, not having events attached.

inVINCEble · Accepted Answer · 2013-01-18 20:26:48Z

0

Try something like this...

<html>
   <script>
      $(document).ready(function(){
         $("a.menu").click(function () {
            $("div.featuredposts_content").hide();
            $("#" + $(this).attr("value")).show();
         });
      })
   </script>
   <body>
      <ul id="featuredposts" class="featuredposts">
         <li><a href="#" class="menu" value="IdOfDiv1">something a</a></li>
         <li><a href="#" class="menu" value="IdOfDiv2">something b</a></li>
      </ul>

      <div id="IdOfDiv1" class="featuredposts_content">
         Cat1
      </div>  

      <div id="IdOfDiv2" class="featuredposts_content">
         Cat2
      </div>
  </body>
</html>

EDIT: Here's a quick explanation.

The $(document).ready() will make sure the wiring of the click does not happen until the page is fully loaded. When the page first loads, everything is being displayed.

Once a user clicks on one of the links with class of menu, the function will run. It will hide every div that have the class of featuredposts_content. Then, based on which link was clicked, it grabs the value and use that in setting which div to show. The value in the link is the id of the div to show.

edited Jan 18, 2013 at 20:26

answered Dec 21, 2012 at 17:30

inVINCEble

1711 silver badge4 bronze badges

1 Comment

rds Over a year ago

Can you explain this answer?

Sushanth -- · Accepted Answer · 2012-12-21 17:00:42Z

0

Looks like the Update panels are messing it up.

You need to bind the event after every postback , otherwise it gets set back to the default page

$(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
    PostBack();
});

function PostBack(){
       $("a.menu").off().on.('click' , function () {
            $("div.featuredposts_content").hide();
            $($(this).attr('href')).show();
            return false;
        });
}

answered Dec 21, 2012 at 17:00

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Jai · Accepted Answer · 2012-12-21 17:12:01Z

0

Well i think issue is the not using the doc ready handler or load function for the events:

<script type="text/javascript">
   $(document).ready(function(){ // <-------------------------you are missing this
    $("a.menu").click(function () {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
   }); //<----------------------------------------------------
</script>

answered Dec 21, 2012 at 17:12

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

show/hide div using jquery and c#

Default.aspx

JQuery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Default.aspx

JQuery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related