asked on

CSS Drilling Down

Given the following markup

<div class = "ColumnBox"</div>
<div class = "HeadLeft"</div>
<div class = "HeadRight"</div>
<div class = "Clear"</div>
<div class = "Inner"</div>
<div class = "PollControl" </div>

How can I hide everything from ColumnBox to PollControl?

I would like to do this inside of the Jquery where I am showing and hiding the PollControl.

Thanks in advance

Tom Beck

Can you wrap it up in a container and show/hide class wrapper?

<div class="wrapper">
        <div class = "ColumnBox"></div>
         <div class = "HeadLeft"></div>
        <div class = "HeadRight"></div>
        <div class = "Clear"></div>
        <div class = "Inner"></div>
</div>
 <div class = "PollControl"></div>

Open in new window

sherbug1015

ASKER

This is the wrapper which is why I asked how to drill down. If I hide the ColumnBox, then there are lots of column boxes on the page as are lots of HeadLeft, etc. I need to drill down to the PollControl div.

Tom Beck

The markup you posted is not valid so I need clarification. Is this the situation?

<div class = "ColumnBox">
        <div class = "HeadLeft"></div>
        <div class = "HeadRight"></div>
        <div class = "Clear"></div>
        <div class = "Inner"></div>
        <div class = "PollControl"></div>
</div>

Open in new window

ColumnBox is wrapping everything else?
How is PollControll show/hide triggered? From a button or link inside the PollControl div?

Mikkel Sandberg

So you want to hide HeadLeft, HeadRight, Clear and Inner, but keep PollControl visible?

Mikkel Sandberg

Or is this the markup?

<div class = "ColumnBox">
        <div class = "HeadLeft"></div>
        <div class = "HeadRight"></div>
        <div class = "Clear"></div>
        <div class = "Inner">
                <div class = "PollControl"></div>
        </div>
</div>

Open in new window

sherbug1015

ASKER

Tom Beck/Mikkel Sandberg

I apologize. here is the correct markup

<div class = "ColumnBox">
<div class = "HeadLeft"</div>
<div class = "HeadRight"</div>
<div class = "Clear"</div>
<div class = "Inner"</div>
<div class = "PollControl" </div>
</div>

No I want to be able to hide the entire thing. The trigger will be based on a date that I am getting in another form. I have a jquery that I am using to show/hide based on the date. However when I hide the .PollControl, then the wrapper still remains. I want the wrapper and the actual PollControl to hide.

Tom Beck

In jQuery, with $(this) representing the div.PollControl, then:

$(this).parent('div.ColumnBox').hide();

Open in new window

sherbug1015

ASKER

I tried this and it doesn't work. Nothing hides at all. This script runs at document.ready so I don't think its going to know that $(this) is pointing to the PollControl. Is there anyway to actually drill down from ColumnBox >*> PollControl inside a jquery script.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

$('.PollControl').closest('.ColumnBox').hide();

Open in new window

Full test code listing (with missing closing '>')

Click on document to hide entire ColumnBox.

<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
<div class = "ColumnBox">
	<div class = "HeadLeft">one</div>
	<div class = "HeadRight">one</div>
	<div class = "Clear">one</div>
	<div class = "Inner">one</div>
             <div class = "PollControl">Poll Control </div>
 </div>
<div class = "ColumnBox">
	<div class = "HeadLeft">two</div>
	<div class = "HeadRight">two</div>
	<div class = "Clear">two</div>
	<div class = "Inner">two</div>
</div>
<div class = "ColumnBox">
	<div class = "HeadLeft">three</div>
	<div class = "HeadRight">three</div>
	<div class = "Clear">three</div>
	<div class = "Inner">three</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">
$(function() {
	$(document).click(function() {
		$('.PollControl').closest('.ColumnBox').hide();
	});
});
</script>
</body>
</html>

Open in new window