In a foreach loop I'm creating some divs (with paragraphs inside gotten from mysql databases). I'd like to make them clickable (/connect them with jquery).
Problem 1: How to create divs with unique IDs?
My solution: Make a counter and use this attribute id="divclick<?php echo htmlspecialchars($count);?>"
Problem 2: How to write one jquery to support all divs?
My unfinished solution: $(document).ready(function(){ $("#divclick").focus(function(){ $("#buttonoption").animate({width:'toggle'}); });
So, how do I tweak the jquery so it reacts to all divs but just one specific #buttonoption is activated according to the div clicked.
Simple. Use a shared class and a data- attribute.
<div data-button="<?php echo $count; ?>" id="divclick<?php echo htmlspecialchars($count); ?>" class="sharedclass"></div>
Then you can bind the click event in jQuery like this:
$(document).on('click', '.sharedclass', function() {
$("#buttonoption" + $(this).data('button')).animate({width:'toggle'});
});