show hide html div с помощью javascript

Question

Я хочу настроить это шоу hide html div с помощью javascript.

HTML

<a href="#" class="clickme">Menu 1</a> 
<div class="box"> 
    <span><span class="labelText"><span></span>Number 1</span></span> 
    <input type="text" value="" maxlength="50"><br/> 
    <span><span class="labelText"><span></span>Number 2</span></span> 
    <input type="text" class="inputclmsize1" value="" maxlength="50" aria-invalid="false"><br> 
    <a href="">Submit</a>                      
</div> 

<a href="#" class="clickme">Menu 2</a> 
<div class="box"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, 
</div> 

CSS код

body { 
font: 12px/16px sans-serif; 
margin: 10px; 
padding: 0;} 

.clickme { 
background-color: #eee; 
border-radius: 4px; 
color: #666; 
display: block; 
margin-bottom: 5px; 
padding: 5px 10px; 
text-decoration: none;} 

.clickme:hover { 
text-decoration: underline;} 

.box { 
background-color: #ccc; 
border-radius: 4px; 
color: #333; 
margin: 5px 0; 
padding: 5px 10px; 
width: auto;} 

код Javascript

$('.box').hide(); 
// Make sure all the elements with a class of "clickme" are visible and bound 
// with a click event to toggle the "box" state 
$('.clickme').each(function() { 
    $(this).show(0).on('click', function(e) { 
     // This is only needed if your using an anchor to target the "box" elements 
     e.preventDefault(); 

     // Find the next "box" element in the DOM 
     $(this).next('.box').slideToggle('fast'); 
    }); 

});

Когда я нажимаю кнопку Menu1, появляется два текстовых столбца с ссылкой на ссылку. Я хочу, когда я нажму кнопку «Отправить», автоматически откроется окно меню 1 и меню 2. как я могу это сделать. пожалуйста, кто-нибудь может помочь? :( скрипку ссылка здесь http://jsfiddle.net/rn4qdyue/2/

Answer 1

Вы можете добавить id в свой файл представить

<a id="submit" href="">Submit</a> 

В JS сделать это:..

$('#submit').click(function(e){ 
    e.preventDefault(); 
    $('.box').slideToggle('fast'); 
}) 

Fiddle

Answer 2

Вы можете добавить событие клика к кнопке отправки, а затем переключить каждое поле.

$("#submit").click(function(e){ 
    e.preventDefault(); 
    $("#box1").slideToggle('fast'); 
    $("#box2").slideToggle('fast'); 
}); 

Примечание я добавил идентификаторы кнопку отправки, и обе коробки DIV s.

Fiddle: http://jsfiddle.net/rn4qdyue/6/

Answer 3

Добавить обработчик щелчка представить щелчок.

<a href="" id="submit">Submit</a> 

---

$('#submit').click(function(e){ 
    e.preventDefault(); 
    var $parent = $(this).closest('.box'); 

    $parent.slideToggle('fast'); 
    $parent.next('.clickme').click(); 
}); 

Updated Fiddle

Answer 4

Проверьте следующее решение.

$('#submit').on('click', function(e) { 
    e.preventDefault(); 
    var $el = $(this).parent('.box'); 

    $el.slideUp('fast'); 
    $el.next().next('.box').slideDown('fast') 
}); 

Updated Fiddle