DIV POP

by JQ Purfect

HTML

<form id="form1" runat="server"> <a href="#" class="showhide">Show Hide</a>

    <div class="slidediv">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis efficitur dolor. Etiam lobortis bibendum auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nisi tellus, maximus eget libero quis, placerat ultricies orci. Mauris luctus justo id magna tincidunt aliquam. Cras sit amet diam in purus lobortis varius. Sed sem lacus, viverra a interdum et, condimentum nec eros. Donec nisi ipsum, dictum quis lectus at, commodo varius justo. Mauris posuere, urna sit amet sollicitudin varius, dui nulla sollicitudin elit, vitae fringilla ex lacus et quam. Maecenas sem libero, semper et lectus et, hendrerit accumsan nunc.</p>
    </div>
</form>
<br />
<div>Some text ...</div>

CSS

#form1 {
   float: right;
    width: 500px;
}

.slidediv {
    width: 40%;
    height:auto;
    padding:10px;
    background:#FF0000;
    color:#fff;
    margin-top:10px;
    border-bottom:5px solid #FFF;
    display:none;
    position: fixed;
}

JavaScript

$(function () {
      $('.showhide').click(function () {
          $(".slidediv").slideToggle();
      });
  });