Clicking in one spot, registering as a click somewhere else

Question

So I am using the expandable lists as presented here (with a demo here ), and so far the JavaScript code allows for a list to be expanded when the line immediately preceding it is clicked. I would like for the list (just one, not all) to expand when a line (or rather word, say <mystyle>word</mystyle> ) somewhere else, not in the same line, not even in the same div is clicked.

Is this possible with JavaScript, or some CSS manipulation? I'm no expert, but I would really like to get this resolved.

Edit 1: Here is a small working example of the body of what I have. The loaded JavaScript is exactly as in the "Update" section of the linked website, as well as jquery-1.4.2.min.js .

<div style="width:350px">
<div id="listContainer"><ul id="expList">
<p align='center'>2011-06-28 - <a href="podcast.mp3"> Download</a> - <mystyle>Show/hide songs</mystyle>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
<li>List of songs<ul>
        <li>Song 1</li>
        <li>Song 2</li>
        <li>Song 3</li>
        <li>Song 4</li>
        <li>Song 5</li>
        <li>Song 6</li>
</ul></li></p>
</ul></div></div>

Basically I want to to be able to click <mystyle>Show/hide songs</mystyle> and the click to register on <li>List of songs .

Answer 1

Try something like this:

$('mystyle').click(function() {
  var mystyle = this;
  $('li:contains(' + $(this)[0].firstChild.data + ')').filter(function() {
    return $(this)[0].firstChild.data === $(mystyle).text();
  }).trigger('click');
});

This would attach a click function to the mystyle element, take the text inside the mystyle element and filter the li 's based on the text inside of them. Then trigger their click event. You'd have to ensure unique texts inside the li 's to avoid unpredictable behaviour. It would be better to use id 's instead. In theory you wouldn't need the :contains() bit, but it might speed things up a little as it ensures the filter is iterating a smaller collection.

Edit

The above solution would work if the text inside <mystyle> is the same as the text inside the li which you want to trigger the click event on. Since this is not true in your case, it would be better to assign some id 's and work with them instead, it requires less code and DOM iterations.

Relevant HTML extract from your example

<mystyle id="showhidesongs">Show/hide songs</mystyle>

<li id="listofsongs">List of songs
  <ul>
    <li>Song 1</li>
    <li>Song 2</li>
    <li>Song 3</li>
    <li>Song 4</li>
    <li>Song 5</li>
    <li>Song 6</li>
  </ul>
</li>

JavaScript

$('#showhidesongs').click(function() {
  $('#listofsongs').trigger('click');
});

Answer 2

You can build this by rewriting the code on the page you linked. Below is the existing code:

function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
      if (this == event.target) {
          $(this).toggleClass('expanded');
          $(this).children('ul').toggle('medium');
      }
      return false;
    })
   .addClass('collapsed')
   .children('ul').hide();
};

$(document).ready( function() {
  prepareList()
});

When you read this you'll see that the child ul of the li that is clicked is hidden or shown. If you want to change that, you'll have to rewrite this logic using something like id 's. You can add a data-target="abc" to the li , have the jQuery code read that value and open or close the ul that has that value as its id . You'd have to make sure that all parents are also opened or else you'll see nothing happening of course