CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 1765

how to apply jquery code to all LI in a UL

Caveat: I am a Wordpress hack, not a front end developer.

A working copy of the code I want to replicate is here. Note: when you click on the office name, the office details are shown/hidden.

This is the functionality I want to recreate with my own jquery.

I don't know how to use Chrome's developer tools to copy the jquery from the working copy.

I have a jsfiddle of the HTML/CSS.

I need to use jquery like this:

$(document).ready(function() {
  $('.viewLocationDetail').click(function() {
    $('.mapLocationDetail').toggle;
  });
}

but I need this jquery to be altered so that it applies to all instances of .viewLocationDetail, and so that the click only toggles the .mapLocationDetail in the same LI as the .viewLocationDetail.

Example LI:

<li class="corePrettyStyle prettylink map accredited-training-rto disability-employment-services disability-management-services-dms employment-services employment-support-services-ess job-in-jeopardy training-services wa " data-title="Armadale, WA" data-lat="-32.15511" data-long="116.01419499999997" data-locationindex="0"><a title="View Armadale, WA" href="#" class="viewLocationDetail">Armadale, WA <span class="mapcategories">Categories: <span>Accredited Training – RTO Disability Employment Services Disability Management Services (DMS) Employment Services Employment Support Services (ESS) Job in Jeopardy Training Services WA </span></span></a>
  <div class="mapLocationDetail">
    <div class="mapDescription clearfix">
      <ul class="maploc-des">
        <li>12/47 William Street</li>
        <li>Armadale, WA 6112</li>
        <li><strong>Ph:</strong>&nbsp; (08) 6267 2555</li>
        <li><strong>Fax:</strong> (08) 6267 2556</li>
      </ul>
      For queries not related to Employment Services, please call 1300 677 789.</div>
    <a href="https://staging.orsgroup.com.au/location/armadale-wa/" class="viewLocationPage btn corePrettyStyle">Location &amp; service details</a>
    <div class="getDirections">Get directions from
      <input id="directionsPostcode" type="text" value="" size="10">
      <a href="#" class="getdirections btn corePrettyStyle">go</a>
      <div class="mapLocationDirectionsHolder"></div>
    </div>
  </div>
</li>

Upvotes: 1

Views: 50

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

I understand you are not from the JavaScript background. Well, there are few mistakes, go ahead and read the comments in the code:

$(document).ready(function() {
  $('.viewLocationDetail').click(function() {
    // 1. Use $(this).
    $(this).find('.mapLocationDetail').toggle(); // 2. Missing ()
  });
}); // 3. Missing closing );

Upvotes: 1

Related Questions