I have had a look at the source code and cant work out how this works.

 

Under the features section of the below link there are 8 boxes when you click one it expands to the right side and brings text.

 

I have looked at source code and it says the text but not the img section

 

can anyone help

 

link is.

 

this is the kind of thing i am looking for my portfolio section.

 

Link

<li>
<a href="#section-two">
<img alt="" src="/images/tabbed-content/quickwebsearch-tab.jpg">
</a>
</li>

 

Eight boxes has an anchor link to content (#section-two in this example). This website uses jQuery to switch on display:none; css style on each list elements + fade in effect.

 

<li id="section-two" style="padding-top: 390px; display: none;">
<h4>Quick web search</h4>
<p>Search or launch your favourite websites: Google Maps, Amazon, eBay, Wikipedia and more. Get quick access to your bookmarks too!</p>
</li>

 

If you look into the source code it looks quite simple.

Edited March 16, 201214 yr by madbytes

yeh i know i have tried to do it, but i cant get the image to move over to the right side

I see no link

Edited March 16, 201214 yr by TheSimpleHost-Nathan

yeh i know i have tried to do it, but i cant get the image to move over to the right side

 

Their website is using facebox plugin. Download it and refer to alfredapp's application.js to see how they implement it.

 

*edit

If you can't figure it out, i can compile a quick example.

Edited March 16, 201214 yr by madbytes

sorry for sounding dumb i have had a look and application.js and dnt understand what i need to do

Basically it's just 2 lists and a bit of jQuery + CSS.

 

The first list contains the 8 small boxes. The second list contains the 8 bits of content that are related to those small boxes. When you click a box, the jQuery hides all the other content and then just shows the text that's related to that specific box.

 

It's lines 49 to 91 in application.js that control it all.