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

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.

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

3

when the parent is hidden it follows that all its child is also hidden

– guradio
Nov 13 '18 at 6:20

but setting show after it is hidden should make it visible

– Felix Farquharson
Nov 13 '18 at 6:20

$("#homepage") selector does nothing (at least from your code sample) because you don't have any elements with this id

– mkrl
Nov 13 '18 at 6:22

this was an error with my example now fixed

– Felix Farquharson
Nov 13 '18 at 6:23

1

As @guradio pointed out, you are trying to reveal child elements within a hidden parent. When you call $("#parent").hide() and $("#child").show(), it will set #child display property to block, however the parent element will still have display: none, there is no way to make it visible.

– mkrl
Nov 13 '18 at 6:34

|
show 1 more comment

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

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

3

when the parent is hidden it follows that all its child is also hidden

– guradio
Nov 13 '18 at 6:20

but setting show after it is hidden should make it visible

– Felix Farquharson
Nov 13 '18 at 6:20

$("#homepage") selector does nothing (at least from your code sample) because you don't have any elements with this id

– mkrl
Nov 13 '18 at 6:22

this was an error with my example now fixed

– Felix Farquharson
Nov 13 '18 at 6:23

1

As @guradio pointed out, you are trying to reveal child elements within a hidden parent. When you call $("#parent").hide() and $("#child").show(), it will set #child display property to block, however the parent element will still have display: none, there is no way to make it visible.

– mkrl
Nov 13 '18 at 6:34

|
show 1 more comment

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

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

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

javascript jquery html css sammy.js

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

edited Nov 13 '18 at 6:23

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

asked Nov 13 '18 at 6:18

Felix Farquharson

17510

3

when the parent is hidden it follows that all its child is also hidden

– guradio
Nov 13 '18 at 6:20

but setting show after it is hidden should make it visible

– Felix Farquharson
Nov 13 '18 at 6:20

$("#homepage") selector does nothing (at least from your code sample) because you don't have any elements with this id

– mkrl
Nov 13 '18 at 6:22

this was an error with my example now fixed

– Felix Farquharson
Nov 13 '18 at 6:23

1

As @guradio pointed out, you are trying to reveal child elements within a hidden parent. When you call $("#parent").hide() and $("#child").show(), it will set #child display property to block, however the parent element will still have display: none, there is no way to make it visible.

– mkrl
Nov 13 '18 at 6:34

|
show 1 more comment

3

when the parent is hidden it follows that all its child is also hidden

– guradio
Nov 13 '18 at 6:20

but setting show after it is hidden should make it visible

– Felix Farquharson
Nov 13 '18 at 6:20

$("#homepage") selector does nothing (at least from your code sample) because you don't have any elements with this id

– mkrl
Nov 13 '18 at 6:22

this was an error with my example now fixed

– Felix Farquharson
Nov 13 '18 at 6:23

1

As @guradio pointed out, you are trying to reveal child elements within a hidden parent. When you call $("#parent").hide() and $("#child").show(), it will set #child display property to block, however the parent element will still have display: none, there is no way to make it visible.

– mkrl
Nov 13 '18 at 6:34

when the parent is hidden it follows that all its child is also hidden

– guradio
Nov 13 '18 at 6:20

but setting show after it is hidden should make it visible

– Felix Farquharson
Nov 13 '18 at 6:20

$("#homepage") selector does nothing (at least from your code sample) because you don't have any elements with this id

– mkrl
Nov 13 '18 at 6:22

this was an error with my example now fixed

– Felix Farquharson
Nov 13 '18 at 6:23

As @guradio pointed out, you are trying to reveal child elements within a hidden parent. When you call $("#parent").hide() and $("#child").show(), it will set #child display property to block, however the parent element will still have display: none, there is no way to make it visible.

– mkrl
Nov 13 '18 at 6:34

|
show 1 more comment

2 Answers
2

active

oldest

votes

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.

answered Nov 13 '18 at 7:10

Agent Droid

916

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

1

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

add a comment |

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

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274925%2fwhy-does-hiding-a-containing-div-mean-the-child-wont-show-in-jquery%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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.

answered Nov 13 '18 at 7:10

Agent Droid

916

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

1

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

add a comment |

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.

answered Nov 13 '18 at 7:10

Agent Droid

916

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

1

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

add a comment |

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.

answered Nov 13 '18 at 7:10

Agent Droid

916

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.

answered Nov 13 '18 at 7:10

Agent Droid

916

answered Nov 13 '18 at 7:10

Agent Droid

916

answered Nov 13 '18 at 7:10

Agent Droid

916

answered Nov 13 '18 at 7:10

Agent Droid

916

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

1

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

add a comment |

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

1

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

thats the proper rule, does help. but what about when the scope is the body?

– Felix Farquharson
Nov 13 '18 at 7:35

If scope is body? In the first place you should not hide the body tag. you should create another container inside the body for you to able to control on things inside the body. so you should not hide the body tag.

– Agent Droid
Nov 13 '18 at 7:47

add a comment |

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

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

add a comment |

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

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

add a comment |

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

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

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>

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

edited Nov 13 '18 at 7:07

answered Nov 13 '18 at 6:36

Sameer

18919

answered Nov 13 '18 at 6:36

Sameer

18919

answered Nov 13 '18 at 6:36

Sameer

18919

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

add a comment |

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

– V-rund Puro-hit
Nov 13 '18 at 7:00

totally agree :)

– Sameer
Nov 13 '18 at 7:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj