Add close button to your WordPress post excerpts with jQuery (JS tips)


Add a neat close button to all your WordPress CMS article posts. The button will display at the top right of all your posts. The button is added simply below using jQuery, and the global ‘article‘ tag, but only closes the one relevant article post at a time with use of ‘parents‘. The use of ‘prepend‘ allows the button to be invoked before the index content, as opposed to ‘append‘ which inserts after.

The jQuery:

<script>
$(document).ready(function() {

$('article').prepend('<span class="close">(Close it X)</span>'); // add the button at the top of the indexed content, use append for bottom	

$('span.close').on("click", function () {
    $(this).parents('article').fadeOut(1400); // use this to access parent only
});

});		
</script>
<!-- insert script before the closing body tag within footer.php file -->
</body>

See it in action with a live JSfiddle demo. Have a code demo request? Let me know!


Published by

admin

I’m Cameron Cashwell, I’ve been a Web Developer for 6+ years. I’m always on the look out for exciting new projects and ideas. Wanna work together? http://www.cdev.co/#request

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz