Hi,
I’m working on a site for a client and there is an accordion gadget on the home page.
The first tab does not conform with the with others in that it is not tab img with the content to the right of it. The client wants the content to overlap the img area (only on the first one).
The problem is that the (about us) img HIDES the overlapping content for a split second when it loads so it looks glitchy.
Logically I think the best solution would be to have the content of that first tab slide in, say from margin-left:1000px to it’s final landing place which at this moment is position:relative; left:-110px;. (note: right now the content is a background image, just one of the many things I’ve tried, but obviously I’m not locked into that)
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> </h3>
<p> </p> </span>
</div>
I’m guessing something like
if img ID=Ist then div id(1st) should function (sneak-in)
would work, but I don’t know HOW. (I’m a design guy, not a real coder)
Here’s the html code:
<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> </h3>
<p> </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.