replace div with another one if statement

Question

I have a if statement function, I want to replace div with another one with fade out and in if function === false

for example

my if is ...

$result = advertise($clmn['id'],$clmn['uid']);
if ($result) {
    echo '<div id="num1">this should be replace</div>';
} else {
    echo '<div id="num0">this is normal</div>';
}

I want to show div#num0 and then replace with div#num1 with fade-out div#num0 and fade-in div#num1

did used method below but unsuccessful !

<script type="text/javascript">$('div#num0').hide()</script>

You have to load the content of both div's in order to do the fadeout OR make an AJAX request for the second div. — Jay Blanchard, May 30 '17 at 20:08
To extend what @JayBlanchard is saying, CSS would most likely be your best solution here. I encourage you to do some reading on [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) — Nathan Robb, May 30 '17 at 20:10

score 1 · Answer 1 · answered May 30 '17 at 20:17

1

$( "#num0" ).fadeOut( "slow", function() {
    // Animation complete
    $( "#num1" ).fadeIn( "slow");
});

answered May 30 '17 at 20:17

aidinMC

1,415
3
18
35

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard May 30 '17 at 20:24

idelara · Answer 2 · 2017-05-30T20:59:34.240

The problem is that you are only rendering either div with your PHP if statement. Since your page is loaded only once, only the div meeting the if condition will be rendered into the DOM (web page). Therefore you cannot hide/show the divs, since there will be only one to hide/show.

This answer is not the optimal solution, but will work for what you are looking for. That being said, you could do the following:

Load both divs, with the return condition from your PHP advertise function being what hides/shows the divs.

//$result is either true or false
$result = advertise($clmn['id'],$clmn['uid']);

echo '<div id="num1"' . ($result ? 'hidden':'' ) . '>this should be replace</div>';
echo '<div id="num0"'. (!$result ? 'hidden':'' ) . '>this is normal</div>';

The above echo statements echo the output of both divs, while hidding one and showing the other based on the return value of the advertise function. Note that you can reverse the output of the echo statements by switching around the $result variable to !$result (negation) in the echo statements.

That way, both divs will be loaded into the page, and you will be able to use the script:

  $('#somediv').click(function(){
    $( "#num0" ).fadeOut( "slow", function() {
      $( "#num1" ).fadeIn( "slow");
    });
  });

I hope this answers your question.

Cheers!

for `$result ? 'hidden':''` you mean that `$result ? 'class="hidden"':''` or not? — sIiiS, May 30 '17 at 20:43
it would work any way. The difference is that you could potentially extend the class "hidden" if you choose to add it as a class. The way I am doing it, it just adds the attribute "hidden" to the div. Note that works with hidden="hidden" or just hidden — idelara, May 30 '17 at 20:50
your solution is good but is not work for me, I think I should use Ajax! — sIiiS, May 31 '17 at 06:10

replace div with another one if statement

2 Answers2