Home/ Questions/Q 6469987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:03:26+00:00

EDIT: the problem was not on hiding them (as I first thought), It was

  • 0

EDIT: the problem was not on hiding them (as I first thought), It was
on using the function toggle() on the hidden DIVs , so I changed the Title Question in
hope it helps someone with similar problem

I have problems to hide/show DIVs using the toggle() function:

the code I am using:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
div{width:200px;padding:5px;padding-left:30px;border:0 solid #000;border-left-width:1px;border-bottom-width:1px;font-weight:700}
p{color:grey}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#main span").click(function() {
        $("#" + $(this).parent().attr("id") + " div").toggle("fast");
    });

    $("#main div").hide();

});
</script>
</head>
<body>
<div id="main">
    <span>hider</span>
    <div id="main-child1"><p>content-child1</p></div>
    <div id="main-child2">
        <span>hider</span>
        <div id="ultra-child"><p>content-ultrachild</p></div>
    </div>
    <div id="main-child3"><p>content-child3</p></div>
    <div id="main-child4">
        <span>hider</span>
        <div id="child-child4"><p>content-c4</p></div>

        <div id="main-child5">
            <span>hider</span>
            <div id="child-c5"><p>content-chl5</p></div>
        </div>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think your problem is that you are selecting (and therefore showing) ALL divs when you click on a hider. Use the child selector to only open the levels you want:

    $("#" + $(this).parent().attr("id") + " > div").toggle("fast");

    However, a better solution would be to just toggle the siblings of the hider

    $(this).siblings("div").toggle("fast");

    Your code to hide the elements works fine.

    Demo: http://jsfiddle.net/EppSm/6

    • 0