Problems with jQuery slideUp and slideDown
I have a project in Wordpress, that has two sets of actions that display on a landing page - Current Actions, and Past Actions.
The default state of both sets of actions is open.
We are using jQuery "slideDown" or "slideUp" to hide and show the content. We are NOT using toggle.
For some reason, clicking on a link specific to a Current Action or Past Action section, makes ALL the links close or open in a section in unison (all current-actions links, or all past-actions links).
Everything is called by a class or an ID, so I thought this could not happen, but it is.
Can anybody see what is wrong with this code?
Thank you.
Here is the jQuery code:
jQuery(function() {
jQuery('#current-actions').find('.close').on('click', function(e) {
jQuery('#action-1').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.actionLinks').on('click', function(e) {
jQuery('#action-1').slideDown(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.close').on('click', function(e) {
jQuery('#action-2').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.actionLinks').on('click', function(e) {
jQuery('#action-2').slideDown(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.close').on('click', function(e) {
jQuery('#action-3').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.actionLinks').on('click', function(e) {
jQuery('#action-3').slideDown(500,'linear');
e.preventDefault();
});
jQuery('#past-actions').find('.close').on('click', function(e) {
jQuery('#past-action-1').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#past-actions').find('.actionLinks').on('click', function(e) {
jQuery('#past-action-1').slideDown(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.close').on('click', function(e) {
jQuery('#past-action-2').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.actionLinks').on('click', function(e) {
jQuery('#past-action-2').slideDown(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.close').on('click', function(e) {
jQuery('#past-action-3').slideUp(500,'linear');
e.preventDefault();
});
jQuery('#current-actions').find('.actionLinks').on('click', function(e) {
jQuery('#past-action-3').slideDown(500,'linear');
e.preventDefault();
});
});
And here is the landing page code.
<p class="leads"><em>chairperson:</em> Mr. Jose XZXXXX (<a href="mailto:crimeNatChair@mpnc.org?subject=Message to MPNC Crime NAT Chairman">send email</a>)</p>
<br /><br />
<strong>Overview</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sapien, a sollicitudin nulla. Sed aliquam lacus in maximus maximus. Sed ut quam eget massa luctus fringilla. Phasellus placerat ipsum quis lacus scelerisque, ac eleifend lorem iaculis. Vivamus ac dolor nulla. In in tincidunt ex. Proin id nulla sollicitudin, sodales sapien varius, porta enim. In cursus faucibus lorem, in tristique arcu ultricies sed.
<br /><br />
<div id="current-actions">
<strong>Current Actions</strong>
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sapien, a sollicitudin nulla. Sed aliquam lacus in maximus maximus.
<br /><br /><a href="/" class="actionLinks">Line one for current actions</a>
<div class="action-content" id="action-1">
Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
<a href="/" class="close">Close section X</a>
</div>
<br /><br /><a href="#" class="actionLinks">Line two for current actions</a>
<div class="action-content" id="action-2">
Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
<a href="/" class="close">Close section X</a>
</div>
<br /><br /><a href="#" class="actionLinks">Line three for current actions</a>
<div class="action-content" id="action-3">
Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
<a href="/" class="close">Close section X</a>
</div>
</div>
<!-- **************************** PAST ACTIONS START HERE **************************** -->
<br /><br />
<div id="past-actions">
<strong>Past Actions</strong>
<br />These actions are completed and closed for activity. Please use the form at right to submit any comments or questions about these past actions.
<br /><br />
<a href="#" class="actionLinks">Past Action Link Title One</a>
<div class="action-content" id="past-action-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus.
<br /><br />
Sed hendrerit mauris sit amet euismod feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus. Sed hendrerit mauris sit amet euismod feugiat.
<a href="/" class="close">Close section X</a>
</div>
<br /><br />
<a href="#" class="actionLinks">Past Action Link Title Two</a>
<div class="action-content" id="past-action-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus.
<br /><br />
Sed hendrerit mauris sit amet euismod feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus. Sed hendrerit mauris sit amet euismod feugiat.
<a href="/" class="close">Close section X</a>
</div>
<br /><br />
<a href="#" class="actionLinks">Past Action Link Title Three</a>
<div class="action-content" id="past-action-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus.
<br /><br />
Sed hendrerit mauris sit amet euismod feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a lorem velit. Ut ac dolor nec lorem iaculis ornare eu nec massa. Integer ut leo quis mi dignissim tempus. Proin semper mi et erat pretium, quis pellentesque felis cursus. Sed hendrerit mauris sit amet euismod feugiat.
<a href="/" class="close">Close section X</a>
</div>
</div>