script.aculo.us Combining a function + command? More efficient?

SunnyHours · 01-29-2010, 03:26 PM

Hi,

I'm building a side navigation for my website and I liked the Accordion effect in jQuery...I'm not really familiar with jQuery so I used Script.aculo.us instead...
So far so good it works, but I don't want it to stutter anymore and I want my 2 functions to be combined so I don't get the annoying click twice "bug"...

Code:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
	function detectStyleDisplay() {
		if (document.getElementById('a').style.display == "") {
			Effect.SlideUp('a');	
		}
		if (document.getElementById('b').style.display == "") {
			Effect.SlideUp('b');	
		}
		if (document.getElementById('c').style.display == "") {
			Effect.SlideUp('c');	
		}
		if (document.getElementById('d').style.display == "") {
			Effect.SlideUp('d');	
		}
	}
</script>
</head>
<body>
<div id="Products">
	<div id="Recessed">
		<h3 onclick="detectStyleDisplay(); Effect.BlindDown('a');">D</h3>
        <div id="a" style="display:none;">
        	<ul>
        		<li><a href="#">D</a></li>
            	<li><a href="#">D</a></li>
            	<li><a href="#">D</a></li>
            	<li><a href="#">D</a></li>
        	</ul>
		</div><!-- End of D Div -->
    	<h3 onclick="detectStyleDisplay(); Effect.BlindDown('b');>W</h3>
        <div id="b">
    		<ul>
        		<li><a href="#">W</a></li>
            	<li><a href="#">W</a></li>
            	<li><a href="#">W</a></li>
            	<li><a href="#">W</a></li>
        	</ul>
		</div><!-- End of W Div -->
        <h3 onclick="detectStyleDisplay(); Effect.BlindDown('c');>P</h3>
    	<div id="c">
        	<ul>
        		<li><a href="#">P</a></li>
            	<li><a href="#">P</a></li>
            	<li><a href="#">P</a></li>
            	<li><a href="#">P</a></li>
        	</ul>
		</div><!-- End of P Div -->
        <h3 onclick="detectStyleDisplay(); Effect.BlindDown('d')";>D</h3>
    	<div id="d">
        	<ul>
        		<li><a href="#">D</a></li>
            	<li><a href="#">D</a></li>
        	</ul>
		</div><!-- End of P Div -->
    </div><!-- End of Recessed Div -->
    
</div> <!-- End of Products Div -->

What I want is to combine the function detectStyleDisplay() and the "Effect.BlindDown('')" together...

I added this to the top of my function but it still doesn't work the way I want...

Code:

if (this.style.display == "none") {
   Effect.BlindDown('this');
}

Also what could I use instead of the hundreds of if statements I'm using? I'm trying to make this script a little bit more efficient...

Thanks!
Fred.