CODEWITHSUNDEEP
jquerycss
Chrissa
Chrissa

Reputation: 153

Div is not totally replaced in show hide command of Jquery

I have this code https://jsfiddle.net/23h4jrde/2/ that allows you to replace a div content when a button is clicked. I think the previous content is not yet fully replaced because when the new content shows it pushes down to the bottom.

$('.ctabtn').on('click', function(){
  $(".information").hide();
  $(".ctabtn").hide();
  $('.hosted-cities').show();
});

Upvotes: 2

Views: 50

Answers (2)

Becky
Becky

Reputation: 5585

I'm not sure what you are after. But if you wish to remove the elements which are being hidden, you can try something like this.

   <div ID="wrapper"> //add a wrapper
       <span class="information">     
          <p class="card__text"> 2020 Winter Whiskey Tasting Festival  </p>
          <p class="card__text2"> Sat, January 25, 2020 </p>
          <p class="card__text3"> 4:00 PM – 6:00 PM CST  </p>
       </span>
       <div class="card__btn ctabtn">JOIN US</div>
    </div>

    <div class="hosted-cities">
       <p class="card__text"> Choose your City </p>
       <button class="card__btn" id="" type="button">Dallas</button>
       <button class="card__btn" id="" type="button">Denver</button>
    </div>

jQuery:

$('.ctabtn').on('click', function(){
    $('.hosted-cities').show();
    $('#wrapper').remove(); //removes the div
});

Edited Fiddle

Upvotes: 1

A. Denis
A. Denis

Reputation: 562

It is hided in your example. Hided - not replaced. For replacement you can use .html() method.

The described problem can be because of several reasons:

1) ".information" or ".ctabtn" element in your original code have !important styles, that will ignore inline styles of hide method.

2) It can be animation problem, so you can change time durations of hiding:

$('.ctabtn').on('click', function(){
  $(".information").hide(0);
  $(".ctabtn").hide(0);
  $('.hosted-cities').show();
});

3) If you want replacement behaviour, change to .html() methods.

Upvotes: 1

Related Questions