Question

I am working with a template I purchased and am trying to add functionality to a tab block. The template can be viewed here. http://themeforest.net/item/developr-fully-responsive-admin-skin/full_screen_preview/2085628 . I am using the “Side Tabs” and am dropping in images into the empty content area in the tabs block. The first tab I have is going to be an “All” tab that shows several images, all of which will have a corresponding tab.

What I want to do is have it where I click any of the images in the “All” tab and the corresponding tab opens. The template is set up so that when a user clicks a tab it sets that tab to active. I want to do this same thing but instead of clicking on the tab, I want to be able to click on the corresponding image. I hope I am explaining clear enough. I was thinking I could either programatically trigger an onClick event on the tab when I click the image or I could set the class to active on the tab when I click the image.

  <!-- Tabs -->
    <ul class="tabs">
        <li class="active">
            <a href="#sidetab-all">All</a>
        </li>
        <xsl:for-each select="$currentPage/SKUContainer/SKU">
            <li>
                <a href="#sidetab-{position()}"><xsl:value-of select="./productNumber"/> - <xsl:value-of select="./productName"/></a>
            </li>
        </xsl:for-each>
    </ul>

    <!-- Inside each tab -->
    <div class="tabs-content" style="min-height: 194px;"> 
      <!--Display SKU images --> 
        <div class="with-padding" style="min-height: 190px; margin-bottom:10px;"    id="sidetab-all">

    <xsl:for-each select="$currentPage/SKUContainer/SKU">
      <div class="with-padding" style="width:190px; list-style:none; text-align:center; margin:0px; padding:0px; float:left;">

      <div style="background:#333333;">
                      <a href="#sidetab-{position()}"><img style="margin:0px;padding:0px; background:#666;" src="{umbraco.library:GetMedia(./mainImage, 'false')/umbracoFile}"/></a>

                      <div style="text-align:center; list-style:none; width:190px; background:#333; color:white; padding: 0px 0px 1px 0px; font-size: 12px;"><xsl:value-of select="productNumber"/> - <xsl:value-of select="productName"/></div>
                      <div style="text-align:center; list-style:none; width:190px; background:#333; color:white; padding: 0px 0px 5px 0px; font-size: 12px;"> <xsl:value-of select="width"/> x <xsl:value-of select="height"/> x <xsl:value-of select="depth"/></div>
                    </div>
                  </div>
                </xsl:for-each>

              </div>

 <xsl:for-each select="$currentPage/SKUContainer/SKU">
   <div class="with-padding" style="min-height: 190px;" id="sidetab-{position()}">
     <div style="float:left;">
       <xsl:if test="./mainImage &gt; 0">
         <img src="{umbraco.library:GetMedia(./mainImage, 'false')/umbracoFile}"/> 
       </xsl:if>
     </div>  

 <!--Display SKU name -->       
   <div class="with-padding" style="float:left;">
     <h3><xsl:value-of select="./productName"/></h3>
   </div> 

 <!--Display Content -->
   <div class="with-padding" style="float:left;">
     <xsl:value-of select="bodyText" disable-output-escaping="yes"/>
   </div>

   <div style="clear:left;"></div>
 </div>
</xsl:for-each>

</div>

Answer 1

  <script type="text/javascript">
    $(function(){
      $('.sidetabimage').click(function(e){
        e.preventDefault();
        var idName = $(this).attr("id");
        var id = idName.replace("sidetabimage-","");
        $('#sidetabnav-'+id).click();
      });
    });
  </script>

^^ This worked for me. Thanks for the links and advice everyone!