ukryj i pokaż zawartość z jquery

Question

Mam 2 elementy div z przyciskiem nad nim. Na początku widać tylko 1 div, a to będzie thecatalogusOrderBox div. Jeśli kliknę przycisk: manualButton (który pojawi się powyżej div), to musi pokazać pole manualOrderBox div i ukryć element catalogusOrderBox div. Ale wtedy trzeba również zmienić tekst przycisku (z przycisku ręcznego na przycisk katalogu), aby użytkownik mógł ponownie otworzyć catalogusOrderBox div, więc jeśli następnie klikniesz ten przycisk, musi on ponownie wyświetlić catalogusOrdersBox i ukryć pole manual OrrderBox.

Na razie mam to i to nie działa:

<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"> 

zobaczyć również https://jsfiddle.net/Lbot8a8b/ żywo w akcji

Answer 1

Spróbuj tego:

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

nadzieję, że to pomaga.

Answer 2

Proszę zaznaczyć to Updated Demo

kod:

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

Kod JQuery :

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

z tekstem przycisk Zmień Demo