I'm attempting to modify the CSS of a specific DIV that shares its class with other divs.
I've searched for a solution but haven't had any luck so far.
Here is the code I've been using without success:
$(".singleOffer").click(function(){
$(this).parent().find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});
HTML
<div id="pattern" class="pattern">
<ul class="g">
<li class="singleOffer">
<img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
<div class="offerSocial">
<a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
<label class="shareLabel">Share on</label>
<div class="share-buttons">
<button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
<button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
</div>
<div>
</li>
<li class="singleOffer">
<img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
<div class="offerSocial">
<a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
<label class="shareLabel">Share on</label>
<div class="share-buttons">
<button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
<button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
</div>
<div>
</li>
.....
</ul>
</div>