CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 929

How to hide only the elements inside with the same class using click function, jQuery

I have 3 elements with the same classes, I want to click on the button "promo__main--details" and hide all content inside the <article>tag and show the <img>tag, but with my code it hides the same elements in the others <tags>, I was trying to use this method but it didn't work.

Here's my code.

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__one">
            <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2>
            <h6 class="promo__main--subtitle">Epic Pass</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__two">
            <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2>
            <h6 class="promo__main--subtitle invisible">Epic Pass</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__three">
            <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2>
            <h6 class="promo__main--subtitle">Mont Tremblant</h6>
            <span class="promo__main--details">Ver Más</span>
            <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
        </article>
    </div>

And the JS:

$(".promo__main--details").click(function(){
    $(".promo__main--title", this).hide();
    $(".promo__main--subtitle", this).hide();
    $(".promo__main--details", this).hide();
    $(".promo__main", this).css({"padding":"0px", "min-height" : "auto"});
    $(".promo__main img", this).show();
});

Hope you guys can help me, Thanks!

Upvotes: 0

Views: 82

Answers (3)

showdev
showdev

Reputation: 29168

JavaScript's this keyword refers to the clicked element. But it seems that you want to select elements within the parent <article>.

I suggest using jQuery's parent() to traverse from the clicked element to its parent <article>.

$(".promo__main--details").click(function() {
  $article = jQuery(this).parent('article');
  $(".promo__main--title,.promo__main--subtitle,.promo__main--details", $article).hide();
  $("img", $article).show();
});
article img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
  <article class="promotions__item promo__one">
    <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2>
    <h6 class="promo__main--subtitle">Epic Pass</h6>
    <span class="promo__main--details">Ver Más</span>
    <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto">
  </article>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
  <article class="promotions__item promo__two">
    <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2>
    <h6 class="promo__main--subtitle invisible">Epic Pass</h6>
    <span class="promo__main--details">Ver Más</span>
    <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto">
  </article>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
  <article class="promotions__item promo__three">
    <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2>
    <h6 class="promo__main--subtitle">Mont Tremblant</h6>
    <span class="promo__main--details">Ver Más</span>
    <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height: "auto">
  </article>
</div>

Upvotes: 2

1252748
1252748

Reputation: 15372

You can do this with a lot less code:

$(function(){
  $("body").on("click", "button.promo__main--details", function(){
    $(this).closest("article").find("*:not(button)").toggle();
  });
});

JSBIN

I made the assumption that you you wanted to hide everything except the button. Also, passed the context to the $ is pretty old fashioned. find() is a new method.

Upvotes: 1

Seyn
Seyn

Reputation: 52

I think that this is more easy

jQuery

$(".promo__main--details").click(function(){
    $(this).closest('.content').hide();
    $(this).closest('article').children('.image').show();
});

CSS

article .image {
    display:none;
}

HTML 

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__one">
            <div class="content">
                <h2 class="promo__main--title">Esqui sin límites <br> en Colorado</h2>
                <h6 class="promo__main--subtitle">Epic Pass</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
             <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
             </div>
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__two">
            <div class="content">
                <h2 class="promo__main--title">¡Promoción de Hospedaje <br> en Clásico Vail!</h2>
                <h6 class="promo__main--subtitle invisible">Epic Pass</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
            <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
            </div>
        </article>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-space">
        <article class="promotions__item promo__three">
            <div class="content">
                <h2 class="promo__main--title">Tus fotos navideñas <br> en Canadá</h2>
                <h6 class="promo__main--subtitle">Mont Tremblant</h6>
                <span class="promo__main--details">Ver Más</span>
            </div>
            <div class="image">
                <img src="images/promociones/promo2-2.jpg" alt="Promociones" width="100%" height:"auto">
            </div>
        </article>
    </div>

A functional example

Upvotes: 1

Related Questions