accordian

accordian

Hi all
New to jquery and need some help:

Below is my code for a horizontal accordian along with css. It is all working however I would like to have more than just text in each 'slide' however when I insert another image it mucks it all up. I assum because of the img tag in the css.
Does anyone know a way I can split easc slide into divs ot any other workround.

Thanks in advance<ul>
<li>
<a id="a1">
<img src="../images/nav1.png" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="../images/nav1.png" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="../images/nav1.png" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>






ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 0px;
}

ul li a{
display: block;
overflow: hidden;
height: 400px;
width: 75px;

background-color:#FFF;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}



cheers for all your help in advance
    • Topic Participants

    • jon