[Jquery] Ẩn hiện thẻ div với button

[Jquery] Ẩn hiện thẻ div với button

Trong hướng dẫn trước tôi đã hướng dẫn bạn cách đưa Form liên hệ (mới) vào lightbox sử dụng Fancybox. Trong hướng dẫn này tôi sẽ hướng dẫn bạn cách đưa Form hiện lên từ phía dưới bằng một button có thể đặt tùy vị trí bạn muốn trên trang.

Đầu tiên mời bạn xem Demo (Ở đây, demo được áp dụng cho chatbox vì Form liên hệ không thể chạy trong chế độ chỉnh sửa HTML. Về cơ bản vẫn không gì thay đổi)

Hiện chatbox

Ẩn chatbox

Đây là toàn bộ Code cho Demo này. Mời bạn Save và lưu với đuôi .html để chạy thử.

<style type="text/css">
#container {
bottom: 0px ;
display: none ;
right: 0 ;
position: fixed ;
}
#inner{border:2px solid #bbb}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var container = $( "#container" );
$( "a.erhay" ).click(
function( event ){
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 100 );
} else {
container.slideDown( 100 );
}
}
);
});
</script>
<a class="erhay" style="text-decoration:none; padding: 6px 10px;background: #92cc63; border-color: #73b240; background-image: linear-gradient(to bottom,#0c9b9b 0,#7FC04C 100%); border-radius: 2px;color: white; text-shadow: 0 1px 0 rgba(19, 10, 10, 0.25);font-weight: bold;" href="#" >Hiện chatbox</a>
<div id="container">
<a class="erhay" style="background:#6D6C71; color:white; text-decoration:none; border-radius:3px 3px 0px 0px; padding:4px 5px" href="#">Ẩn chatbox</a>
<div id="inner">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0; background:white">
<div><iframe frameborder="0" width="250" height="325" src="http://www7.cbox.ws/box/?boxid=693921&amp;boxtag=3prvdn&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-693921" style="border: 0px solid;" id="cboxmain7-693921"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=693921&amp;boxtag=3prvdn&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-693921" style="border: 0px solid;border-top:0px" id="cboxform7-693921"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div>

Toàn bộ nội dung muốn Ẩn hiện bạn có thể cho vào trong div với id="inner" được bôi xanh trong code trên.

Áp dụng với Form liên hệ trong Blogger.

Bước 1 : Thêm CSS sau trước ]]></b:skin>

#container {
bottom: 0px ;
display: none ;
right: 0 ;
position: fixed ;
}
#inner{border:2px solid #bbb}

Bước 2 : Thêm Jquery sau trước </head> .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var container = $( "#container" );
$( "a.erhay" ).click(
function( event ){
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 100 );
} else {
container.slideDown( 100 );
}
}
);
});
</script>

Bước 3 : Thêm button để mở Form liên hệ.

<a class="erhay" style="text-decoration:none; padding: 6px 10px;background: #92cc63; border-color: #73b240; background-image: linear-gradient(to bottom,#0c9b9b 0,#7FC04C 100%); border-radius: 2px;color: white; text-shadow: 0 1px 0 rgba(19, 10, 10, 0.25);font-weight: bold;" href="#" >Liên hệ</a>

Bước 4 : Thêm đoạn mã sau trước </body>

<div id="container">
<a class="erhay" style="background:#6D6C71; color:white; text-decoration:none; border-radius:3px 3px 0px 0px; padding:4px 5px" href="#">Ẩn liên hệ</a>
<div id="inner">
<!-- BEGIN -->
 <b:section class='sidebar12' id='section22' preferred='yes'>
   <b:widget id='ContactForm1' locked='false' title='Liên hệ' type='ContactForm'>
     <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        Họ và tên của bạn :
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <span style='font-weight: bolder;'>Địa chỉ Email của bạn : *</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <span style='font-weight: bolder;'>Gửi nhận xét : *</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
   </b:widget>
 </b:section>
<!-- END  -->
</div>
</div>

Bước 5 : Save template. 

Bạn có thể style lại các button cho đẹp hơn theo ý mình. Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này.

Minh Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.