On some event, affect a sibling div with a certain class?

**jlizarraga** · 08-26-2008, 03:53 AM

Hi all. I'm not having any problems or errors, just wondering how to do something y'all gurus will likely find simple.

Consider the following markup:

Code:

<div id="mm3_FilterMinPrice" class="mm3_FilterButtonContainer">
    <a class="mm3_FilterButton" href="#">
        <span>Min. Price</span>
    </a>
    <div id="mm3_TTFilterMinPrice" class="mm3_Tooltip">
        Hello world.
    </div>
</div><!-- end mm3_FilterMinPrice -->

I have a listener set up (using Yahoo's YUI Event Utility) for <a>'s with the class "mm3_FilterButton". This is working great, but right now all it's set to do is show an alert:

Code:

var filterButtons = getElementsByClass("mm3_FilterButton");
function fnCallback(e) { alert("You clicked a filter button. EXCITING."); }
YAHOO.util.Event.addListener(filterButtons, "click", fnCallback);

I would like fnCallback() to affect siblings with the class "mm3_Tooltip". How do I go about targeting the adjacent .mm3_Tooltip div?

Thanks a ton for any help!

**codeexploiter** · 08-27-2008, 04:07 AM

Have a look at the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/utilities/utilities.js">
        </script>
        <script type="text/javascript">
        	var Dom = YAHOO.util.Dom;
			var Event = YAHOO.util.Event;
			
			Event.onDOMReady(function(){
				Event.addListener([Dom.getElementsByClassName("mm3_FilterButton","a","mm3_FilterMinPrice"),Dom.getElementsByClassName("mm3_Tooltip",null,"mm3_FilterMinPrice")],"click",fnCallback)
			});   
			function fnCallback(e) { alert("You clicked a filter button. EXCITING."); }     
        </script>
    </head>
    <body>
        <div id="mm3_FilterMinPrice" class="mm3_FilterButtonContainer">
            <a class="mm3_FilterButton" href="#"><span>Min. Price</span></a>
            <div id="mm3_TTFilterMinPrice" class="mm3_Tooltip">
                Hello world.
            </div>
        </div>       
    </body>
</html>

Hope this helps

Thread: On some event, affect a sibling div with a certain class?

Thread Tools

Search Thread

On some event, affect a sibling div with a certain class?

Bookmarks

Bookmarks

Posting Permissions