fadeToggle div, а затем снова

Question

Извините, если это действительно очевидная проблема. То, что я пытаюсь сделать, это иметь div, когда выбранный заменен другим div с возможностью возврата «назад» к старому div при нажатии «назад».

Это то, что я до сих пор:

$(document).ready(
 
    function() { 
 
     $("#display-one").click(function() { 
 
      $("#display-two").fadeToggle(); 
 
      $("#display-one").fadeToggle(); 
 
     }); 
 
    });

#display-two { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div id="header"> 
 
    <div id="display-one"><a href="#">Dispay One</a></div> 
 
</div> 
 

 
<div id="display-two"> 
 
<p><a href="#">Display Two</a></p> 
 
<h3> 
 
<div id="back"> 
 
<a href="#">back</a> 
 
</div> 
 
</h3> 
 
</div>

Вот JSFiddle: https://jsfiddle.net/uL8z87r7/1/

Заранее спасибо за любую помощь и советы! -John

Answer 1

Просто добавьте #back a к вашему селектору так будет $("#display-one, #back a")

$("#display-one, #back a").click(function() { 
 
    $("#display-two").fadeToggle(); 
 
    $("#display-one").fadeToggle(); 
 
});

#display-two { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <div id="display-one"><a href="#">Dispay One</a> 
 
    </div> 
 
</div> 
 

 
<div id="display-two"> 
 
    <p><a href="#">Display Two</a> 
 
    </p> 
 
    <h3> 
 
<div id="back"> 
 
<a href="#">back</a> 
 
</div> 
 
</h3> 
 
</div>

Answer 2

Вы должны добавить слушатель для кнопки возврата

$(document).ready(
    function() { 
     $("#display-one,#back").click(function() { 
      $("#display-two").fadeToggle(); 
      $("#display-one").fadeToggle(); 
     }); 
    }); 

Answer 3

$(document).ready(function() { 
 
    $("#display-one, #back").click(function() { 
 
     $("#display-one, #display-two").fadeToggle(); 
 
    }); 
 
});

#display-two { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div id="header"> 
 
    <div id="display-one"><a href="#">Dispay One</a></div> 
 
</div> 
 

 
<div id="display-two"> 
 
<p><a href="#">Display Two</a></p> 
 
<h3> 
 
<div id="back"> 
 
<a href="#">back</a> 
 
</div> 
 
</h3> 
 
</div>