fadeToggle div und dann wieder zurück

Question

Sorry, wenn das ein wirklich offensichtliches Problem zu lösen ist. Was ich versuche zu tun, ist ein div, wenn ausgewählt wird durch ein anderes div mit der Option ersetzt "zurück" auf das alte div, wenn "zurück" geklickt wird. Diese

ist das, was ich bisher:

$(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>

hier ein JSFiddle ist: https://jsfiddle.net/uL8z87r7/1/

Vielen Dank im Voraus für jede Hilfe und Tipps! -Johannes

Answer 1

Nur #back a zu Ihrem Selektor hinzufügen, damit es $("#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

Sie haben sein Zuhörer für die Zurück-Taste

$(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>

hinzufügen