Steve Steve - 6 months ago 9
Javascript Question

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>

Answer

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 );
Comments