Forum user: kitz1980

I want to have a thumbnail gallery where as i click on the thumbnail it will open the tab where the img is categorize in and jump into the portion where the specification is written.

I don't have it in a code but my imagination is something like this.

<!-- Sample Gallery -->   
<div id="sampleGallery">
 <a href="#apple" alt="fruit"><img src="apple.jpg"/></a> 
 <a href="#tomato" alt="vegetable"><img src="tomato.jpg"/></a>
 <a href="#cabbage" alt="vegetable"><img src="cabbage.jpg"/></a>
 <a href="#carrot" alt="vegetable"><img src="carrot.jpg"/></a>
</div>

<ul class="tabs">   
    <li><a href="#">Tab 1 - fruit </a></li>   
    <li><a href="#">Tab 2 - vegetable</a></li>   
</ul>   
   
<!-- tab "panes" -->   
<div class="panes">   

    <!-- 1st tab -->  
    <div>
     <h2> Fruit </h2>
     <p>Lorem ipsum ....</p>

     <a name="apple"></a>
     <h5> apple </h5>
     <p>Lorem ipsum ....</p>
    </div>

    <!-- 2st tab -->  
    <div>    
     <h2> vegetable </h2>
     <p>Lorem ipsum ....</p>

     <a name="tomato"></a>
     <h5> tomato </h5>
     <p>Lorem ipsum ....</p>

     <a name="cabbage"></a>
     <h5> cabbage </h5>
     <p>Lorem ipsum ....</p>

     <a name="carrot"></a>
     <h5> carrot </h5>
     <p>Lorem ipsum ....</p>
    </div>   

</div>

Opening a specified tab was working :)

How about opening the tab and making it jump to an anchor inside the content? is this possible?

<a href="#2ndTitle">jump</a>

<ul class="tabs">  
    <li><a href="#tab1">Tab 1</a></li>  
    <li><a href="#tab2">Tab 2</a></li>  
    <li><a href="#tab3">Tab 3</a></li>  
</ul>  
  
<!-- tab "panes" -->  
<div class="panes">  
    <div>First tab content. Tab contents are called "panes"</div>  
   
    <div>   
    <h2>Second tab content<h2>
    <p>blah... blah...</p>

    <a id="2ndTitle" name"2ndTitle"></a>
    <h2>second title</h2>
    <p>blah... blah...blah... blah...blah... blah...</p>
    </div>  

    <div>Third tab content</div>  
</div>