How to expand a list item using an href around an img ?

[mrvoytek]

How do I expand the li item when the user clicks on a link within the li, instead of having to click on the arrows?

thanks

[simonexmachina]

You can use a bit of jQuery to achieve this. You'll need to wrap the text you want to be clickable in an element, in this example I've used a <span>.

<ol id='music'>
  <li><span>Instrumental Ensembles</span>
    <ul>
      <li><span>String section</span></li>
      <li><span>Brass and/or Horns sections</span></li>
      <li><span>Percussion Sections</span></li>
    </ul>
  </li>
</ol>

$('#music').on('click', 'span', function() {
  $(this).closest('li').find('> .thumb').click();
});

[mrvoytek]

Excellent Simon! That works well.

I also added some CSS to make it look like a link:

#music span {
cursor:pointer;
}

Many thanks!

On Thu, Jun 18, 2015 at 10:55 PM, Simon Wade notifications@github.com wrote:

You can use a bit of jQuery to achieve this. You'll need to wrap the text you want to be clickable in an element, in this example I've used a .

1. Instrumental Ensembles
   • String section
   • Brass and/or Horns sections
   • Percussion Sections

$('#music').on('click', 'span', function() { $(this).closest('li').find('> .thumb').click(); });

— Reply to this email directly or view it on GitHub https://github.com/aexmachina/jquery-bonsai/issues/23#issuecomment-113383748 .