Question

I’m using Kwicks jQuery plugin for my portfolio. I want to show a child container within the list item after the kwicks click event. I can’t seem to find a hook for this, at least within the parameters of the kwicks plugin.

After doing some research I couldn’t find anything. Anybody know how to achieve this?

I’m using jQuery 1.4.2 and Kwicks 1.5.1.

P.S. If you couldn’t tell, I’m a total jQuery/javascript noob.

Code:

<script type="text/javascript">

$().ready(function() {

 $('#projects').kwicks({
  max : 720,
  event : 'click'
 });


 $('.desc').show();
});

</script>


<ul id="projects">
    <li>
      <div class="desc">
      <h3><%= project.title %></h3>
      <p>blah blah blah<%= project.description %></p>
      </div>
    </li>
    <li>
      <div class="desc">
      <h3><%= project.title %></h3>
      <p>blah blah blah<%= project.description %></p>
      </div>
    </li>
</ul>

Thanks in advance for your help.

Answer 1

I ended up using fudgey’s rewrite of the kwicks (http://github.com/Mottie/Kwicks) and it worked like a champ. This is what I ended up with:

$(document).ready(function() {

  function hideAllDesc(){ // Fades out all descriptions that are shown before expanding a new one
    $('#projects li .desc').fadeOut();
  }

  function showDesc(){ // Shows description on expand
    $('#projects li.active .desc').fadeIn();
  }

  function hideDesc(){ // Hides description on collapse/mouseout
    $('#projects li.active .desc').fadeOut();
  }

  $('#projects').kwicks({
    max : 720,
    event : 'click',
    init : hideAllDesc,
    expanding : showDesc,    
    collapsing : hideDesc

  });

});

Thanks for your help everybody!