Proper if/then (or if/else?) syntax... THANKS

JavaScript
1

I’m working on a site for a client and there is a horizontal accordion tab set of images and content on the home page (BELOW the nav menu). dnfgraphics dot com/cypress/

The first tab (ONLY the first tab) does not conform with the with others in that it is does not have the content to the right of it but rather it OVERLAPS the tab img .

As you can see, the problem is that the tab img hides the content for a split second when it loads causing a glitch/blink/thingy. The tab img is transparent so it shouldn’t hide anything, and even when I tried it with an img that was only 20px tall so it couldn’t possibly block the content, it still did.

Logically I think the best solution would be to have the content of that first tab fly in, say from margin-left:1000px to it’s final landing place margin-left:-110px; (the negative margin setting is what allows the overlap).

When the first tab is “on”, it looks like this:

<img class="current" id="Ist" src="images/about2.png">
	<div id="1st" style="width: 298px; height: 275px; display: block;">
		<span class="interior"><h3>&nbsp;</h3>
		<p>&nbsp;		</p>        </span>
	</div>

I’m guessing something like

if img ID=Ist is class.current then div id(1st) should function (fly-in)

would work, but I don’t know HOW. (I’m a design guy, not a real coder), so if someone could please just advise me on how to write the syntax properly, I would sooo appreciate it.

THANKS!!!

Here’s the html code for reference:

<div id="accordion">
	<!-- accordion header #1 -->
<img id="Ist" src="images/about2.png" />
	<div id="1st" style="width:298px; height:275px;">
		<span class="interior"><h3>&nbsp;</h3>
		<p>&nbsp;		</p>        </span>
	</div>
<img src="images/training.jpg" />
	<div>
		<span class="interior2"><h3>Training</h3>
		<p>			Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. 		</p></span>
	</div>
<img src="images/services.jpg" />
	<div>
		<span class="interior2"><h3>Services</h3>
		<p>			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.		</p></span>
	</div>	
<img src="images/markets.jpg" />
	<div>
		<span class="interior2"><h3>Markets</h3>
		<p>			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.		</p></span>
	</div>	
<img src="images/technology.jpg" />
	<div>
		<span class="interior2"><h3>Technology</h3>
		<p>			Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.		</p></span>
	</div>	
</div>
<!-- activate tabs with JavaScript -->
<script>

jQuery(document).ready(function($) {

$("#accordion").tabs("#accordion div", {
	tabs: 'img', 
	effect: 'horizontal', 
	event: 'mouseover'
});

});
 

</script>

Thanks for your help. The client is ANXIOUSLY awaiting results.