CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SNos
SNos

Reputation: 3470

jQuery - Change CSS of one div that shares its class with other divs

I am trying to change the CSS of a single DIV that shares its class with other divs.

I have been trying looking around for a solution but nothing seems to work.

I am trying using the code below without results:

$(".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>

Upvotes: 1

Views: 416

Answers (3)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

.offerSocial is already a child of .singleOffer, so you want to remove the .parent() selector so you don't get ALL of the .offerSocial elements, and only the element that's associated with that specific .singleOffer element.

$(".singleOffer").click(function(){
    $(".offerSocial").css({ opacity: "0" });
    $(this).find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});

Upvotes: 3

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2526

your html is something like this 

 <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>

...
</ul>

your js function fires on click of element with class singleOffer. It then gets to its parent that is ul and then tries to find elements with class offerSocial from its children. So it will find all the elements under the ul and apply your transformation there.

So all you should do to make the effect to just this div is remove the parent() function from your js

Upvotes: 1

oguzhancerit
oguzhancerit

Reputation: 1572

I am not sure what you want but I didn't understand why did you used parent. Remove the parent function. 

$(".singleOffer").click(function(){
  $(this).find(".offerSocial").css({transform: "translateY(0%)", opacity: "1"});
});

Upvotes: 0

Related Questions