Кнопка, которая опускает текстовое поле

Я пытаюсь закодировать кнопку с помощью CSS/HTML, который, когда вы нажимаете на нее, падает или показывает текстовое поле.Кнопка, которая опускает текстовое поле

Вот образ того, что я пытаюсь достичь:

what I'm trying to achieve

источник

2015-12-02 w0mp

вы хотите, чтобы это сделать в jquery или javascript? –

Попробуйте это:

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<script> 
$(document).ready(function(){ 
$("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
}); 
}); 
</script> 

<style> 
#panel, #flip { 
padding: 5px; 
text-align: center; 
background-color: #e5eecc; 
border: solid 1px #c3c3c3; 
} 

#panel { 
padding: 50px; 
display: none; 
} 
</style> 
</head> 
<body> 

<div id="flip">Click to slide down panel</div> 
<div id="panel">Hello world!</div> 

</body> 
</html>

источник

2015-12-02 01:29:54

Попробуйте это:

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
    <script> 
     $(document).ready(function(){ 
      $("#pcontainer").toggle(); 
      $(".btn2").click(function(){ 
      $("#pcontainer").slideToggle(); 
     }); 
    }); 
    </script> 
    <style> 
     background: [your_background_color]; 
    </style> 
    </head> 
    <body> 
     <div id="pcontainer"> 
     <p>Your text.</p> 
     </div> 
     <button class="btn2">Slide down</button> 

    </body> 
    </html>

источник

2015-12-02 01:32:57 lyndact

Кнопка, которая опускает текстовое поле

ответ

Смежные вопросы