Hide image on click of button and show text-CodePudding

jQuery(".b2b-btn").click(function() {

  jQuery(".b2b-image").removeClass('hideb2bimage');
  jQuery(".b2b-text").removeClass('expanded');

  jQuery(this).closest('col-b2b').find(".b2b-image").toggleClass('hideb2bimage');
  jQuery(this).closest('col-b2b').find(".b2b-text").toggleClass('expanded');


});

.hideb2bimage {
  height: 0px;
  visibility: hidden;
}

.b2b-text {
  height: 0px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease-out 500ms, opacity 500ms;
}

.expanded {
  height: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s ease-in 0s, opacity 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-row">
  <div class="col-b2b">
    <img class="b2b-image" scr="https://picsum.photos/200/300?random=1">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" scr="https://picsum.photos/200/300?random=2">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" scr="https://picsum.photos/200/300?random=3">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
</div>

I want to show text and hide image upon clicking on the button. But I only want to show the text of the column which button is clicked. Also in case someone click on the first column and it shows the text of one column and then click on the second column button it should hide the text of first column. Above is the code I am using please let me know what mistake I am making. Also I want to make click function on image as well.

CodePudding user response：

Several typos and some css mistakes:

jQuery(this).closest('col-b2b') should be jQuery(this).closest('.col-b2b').
<img class="b2b-image" scr=" should be <img class="b2b-image" src=".
visibilitycannot be transformed. Use opacity instead.
height and other lengths cannot be transformed to auto values. Work with animating max-height instead.

jQuery(".b2b-btn").click(function() {
  jQuery(".b2b-image").removeClass('hideb2bimage');
  jQuery(".b2b-text").removeClass('expanded');
  jQuery(this).closest('.col-b2b').find(".b2b-image").toggleClass('hideb2bimage');
  jQuery(this).closest('.col-b2b').find(".b2b-text").toggleClass('expanded');
});

.b2b-image {
  max-height: 100vh;
  opacity: 1;
  transition: all 0.5s ease-in;
}

.hideb2bimage {
  max-height: 0;
  opacity: 0;
}

.b2b-text {
  height: 0;
  opacity: 0;
  transition: all 0.5s ease-out;
}

.expanded {
  height: auto;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-row">
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=1">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=2">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=3">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
</div>

CodePudding user response：

Here's a suggestion with smooth transition without any flickering:

Fix the images attribute scr to src
Create a common wrapper DIV .b2b-cont for the text and the image
Set the image as an absolute underlay, almost as a background image
Use CSS Flex so that the text length dictates the boxes height
Just toggle with JS a class like .is-active from the closest column parent. Remove .is-active from all the other columns

Example:

jQuery(($) => { // DOM ready and $ alias in scope

  $(".b2b-btn").on("click", function() {
    const $col = $(this).closest(".col-b2b");
    const $otherCol = $(this).closest(".main-row").find(".col-b2b").not($col);
    $col.toggleClass("is-active");
    $otherCol.removeClass("is-active"); 
  });

});

/*QuickReset*/ * {margin:0; box-sizing: border-box;}

.main-row {
  display: flex;
}

.col-b2b {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.b2b-cont {
  flex: 1;
  position: relative;
}

.b2b-image {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.b2b-text {
  padding: 1em;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

.col-b2b.is-active .b2b-text {
  visibility: visible;
  opacity: 1;
}

.col-b2b.is-active .b2b-image {
  visibility: hidden;
  opacity: 0;
}

<div class="main-row">
  <div class="col-b2b">
    <div class="b2b-cont">
      <img class="b2b-image" src="https://picsum.photos/200/300?random=1">
      <p class="b2b-text">this is some text</p>
    </div>
    <button class="b2b-btn" type="button">Please Click</button>
  </div>
  <div class="col-b2b">
    <div class="b2b-cont">
      <img class="b2b-image" src="https://picsum.photos/200/300?random=2">
      <p class="b2b-text">this is some text</p>
    </div>
    <button class="b2b-btn" type="button">Please Click</button>
  </div>
  <div class="col-b2b">
    <div class="b2b-cont">
      <img class="b2b-image" src="https://picsum.photos/200/300?random=3">
      <p class="b2b-text">This text, since it's the longest, it dictates all other elements heights thanks to CSS flex. If you learn CSS flex there's no going back, you can only start to learn to cook, pet your cat, dry-leaf-jumping...</p>
    </div>
    <button class="b2b-btn" type="button">Please Click</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

Consider the following.

jQuery(function($) {
  $(".b2b-btn").click(function() {
    var btn = $(this);
    var img = btn.parent().find("img");
    var txt = btn.parent().find("p");
    var state = txt.hasClass("expanded");
    $(".main-row .b2b-text").removeClass("expanded");
    $(".main-row .b2b-image").removeClass("hideb2bimage");
    if (state) {
      img.removeClass("hideb2bimage");
      txt.removeClass("expanded");
    } else {
      img.addClass("hideb2bimage");
      txt.addClass("expanded");
    }
  });
});

.col-b2b {
  display: inline-block;
  width: 200px;
}

.hideb2bimage {
  display: none;
}

.b2b-text {
  display: none;
}

.expanded {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-row">
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=1">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=2">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
  <div class="col-b2b">
    <img class="b2b-image" src="https://picsum.photos/200/300?random=3">
    <p class="b2b-text">this is some text</p>
    <button class="b2b-btn">Please Click</button>
  </div>
</div>

Using .toggleClass() can be really helpful in these use cases.

Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

https://api.jquery.com/toggleclass/

Update

I am better able to understand your need. I have updated the code above to help determine the current state of the Text. If it's expanded, collapse it. But for all, collapse the text and show the image regardless of the button that is clicked.