Why does hiding a containing div mean the child wont show in jquery

Question

Why does hiding a containing div mean the child wont show in jquery

136 Views Asked by Felix Farquharson At 18 April 2025 at 16:14

The following code works but i would like to replace the lines $("#homepage").hide(); with $("#page").hide(); so i can take care of multiple pages. the problem is that the page will hide the page div but not show the homepage div again but it will show and hide the divs correctly if there are no parent divs involved.

<html>
  <body>
    <div id="page">
      <div id="homepage">
        <h1>home</h1>
      </div>
      <div id="advert">
        <h1>advert</h1>
      </div>
    </div>
    <script>
      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#ad").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#homepage").hide();
          $("#ad").show();
        });
      });
      app.run();
    </script>
  </body>
</html>

i modify the code as follows to demonstrate my intended usage:

      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#page").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#page").hide();
          $("#ad").show();
        });
      });
      app.run();

this code produces a window that is blank and does not show the homepage or ad page. i have tried with multiple different routing libraries.

Original Q&A

There are 2 best solutions below

**Sameer** · Answer 1

I didn't used sammy.js library. I found simple sample example. check below link. https://jsfiddle.net/KZknm/34/

$.sammy(function(){
        // bind to #:page where :page can be some value
        // we're expecting and can be retrieved with this.params
        this.get('#:page',function(){
            // Demo just finds the div within #pages and loads it
            // within the #container
            $('#container').empty().append(
                $('#pages #'+this.params['page']+'_html').clone()
            );
        });
    }).run();

here is Html

<!-- very simple container that may be changed with clicks -->
<div id="container">
    <h1>Default Page</h1>
    <p>This is the default page</p>
</div>

<!-- Dummy navigation list using hash links -->
<ul>
    <li><a href="#foo">Load "foo.html"</a></li>
    <li><a href="#bar">Load "bar.html"</a></li>
</ul>

<!-- fake ajax content--for the purposes of this demo, we just load
     content from another source (in this case named divs) -->
<div id="pages" style="display:none">
    <div id="foo_html">
        <h1>Foo page</h1>
        <p>This is the foo page.</p>
    </div>
    <div id="bar_html">
        <h1>Bar page</h1>
        <p>This is the bar page</p>
    </div>
</div>

**Agent Droid** · Answer 2

If you hide the parent , also the child will be hide coz their are connected to each other. as you can see the hierarchy design of the tag. So if you want to show the

<div id="homepage"></div>

and hide the

<div id="page"></div>

you should take the #homepage outside the scope of #page. That's the proper rule.

I hope it helped you.

Why does hiding a containing div mean the child wont show in jquery

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in SAMMY.JS

Trending Questions

Popular # Hahtags

Popular Questions