verstecken und zeigen Inhalte mit jquery

Question

Ich habe 2 divs mit einem Knopf darüber. Am Anfang siehst du nur 1 div und das wird thecatalogusOrderBox div sein. Wenn ich auf die Schaltfläche manualButton klicke (die über dem div angezeigt wird), muss es das manualOrderBox div anzeigen und das catalogusOrderBox div verbergen. Aber es muss dann auch den Schaltflächentext ändern (von der manuellen Schaltfläche zur Katalogschaltfläche), damit der Benutzer das div-Feld catalogusOrderBox erneut öffnen kann. Wenn Sie dann auf diese Schaltfläche klicken, muss die catalogusOrdersBox erneut angezeigt und die manualOrderBox ausgeblendet werden.

Für jetzt habe ich dieses und es funktioniert nicht:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.manualOrderBox').hide().before('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>'); 
    $('a#toggle-manualOrderBox').click(function() { 

     $('.manualOrderBox').slideToggle(1000); 

     if($('.manualOrderBox').is(":visible")){ 
      $('.catalogusOrderBox').hide(); 
      $('.manualOrderBox').visible = false; 
     }else{ 
     $('.manualOrderBox').visible = true; 
     $('a#toggle-manualOrderBox').text('catalogus orderBox'); 
     $('.catalogusOrderBox').show(); 
     } 
     return false; 
    }); 

}); 
</script> 

<div class="manualOrderBox"> 

siehe auch https://jsfiddle.net/Lbot8a8b/ Live in Aktion

Answer 1

Try this:

$(document).ready(function() { 
 
    var newAnchor = $('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>'); 
 
    var manualBox = $('.manualOrderBox'); 
 
    var catalogusBox = $('.catalogusOrderBox'); 
 
    manualBox.slideUp({ duration: 0 }).slideDown({ duration: 0 }).before(newAnchor); 
 
    catalogusBox.slideUp({ duration: 0 }); 
 
    newAnchor.text('catalogus order box'); 
 
    newAnchor.click(function() { 
 
     newAnchor.text(manualBox.is(':visible') ? 'manual order box' : 'catalogus order box'); 
 
     catalogusBox.stop(true).slideToggle(400); 
 
     manualBox.stop(true).slideToggle(400); 
 
     return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="manualOrderBox">manualbox hello</div> 
 
<div class="catalogusOrderBox">catalogus box hello</div>

Hoffnung, das hilft.

Answer 2

Bitte überprüfen Sie diese Updated Demo

HTML-Code:

<button class="changeDiv" id="catalogusOrderBox" value="manualOrderBox">Change Div</button> 
<div class="manualOrderBox"> 
     manualbox hello 
</div> 
    <div class="catalogusOrderBox" style="display:none"> 
     catalogus box hello 
</div> 

JQuery-Code :

$(".changeDiv").click(function() 
    { 
     $(".manualOrderBox").hide(); 
     $(".catalogusOrderBox").hide(); 
     id = this.id; 
     val = $(".changeDiv").val(); 
     $("."+id).show(); 
     $(".changeDiv").val(id); 
     $(".changeDiv").attr("id", val); 
    }); 

mit Wechseltaste Text Demo