Question

Is it possible to show and hide divs like scrolling style with mousedown() from div1 to div5 ?
I have just developed a function which is scrolling down and up. which is working fine.
Can we change this function to show div1, div2…. when mousedown() viseversa for mouseup() ?

The thing is that show only one div at a time

here is my present JQuery code

$(document).ready(function() {
    var mouseisdown = false;
    $('.up').mousedown(function(event) {
        mouseisdown = true;
      var topVal = $(".content").css("top").replace(/[^-\d\.]/g, ''); //remove the px from the current top val
        topVal = parseInt(topVal);
      console.log(topVal);
      if(topVal < 0){ //This is to stop it when it reaches the top
      $('.up').parents(".container").find(".content").stop().animate({"top":topVal + 20  + 'px'},'slow');
        if (mouseisdown)
    setTimeout(ScrollUp, 400); 
      }
    }).mouseup(function(event) {
        mouseisdown = false;
    });

    $('.dn').mousedown(function() {
        mouseisdown = true;
          var topVal = $(".content").css("top").replace(/[^-\d\.]/g, '');
        topVal = parseInt(topVal);
      console.log($(".content").height()+ " " + topVal);
      if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues
      $('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20  + 'px'},'slow');
        if (mouseisdown)
    setTimeout(ScrollDown, 400);
      }
    }).mouseup(function() {
        mouseisdown = false;
    }); 
});

CSS

  div.container {
  overflow:hidden;
  width:250px;
  height:200px;
    zoom: 1;  /* IE7 Fix - doesnt work */
  }
  div.content {
    position:relative;
    top:0;
    left: 110px; /*this is for demo - it cuts off the text */
    zoom: 1; /* IE7 Fix - doesnt work */
    clear:bothl;
  }
  .up, .dn{
      border:1px solid orange;
    cursor: pointer;
  }
  .up:hover, .dn:hover{
      background-color:yellow;
  }

HTML

<div class="container">
    <button class="up">Up</button> &nbsp; 
    <button class="dn">Down</button>
    <hr style="clear:both;"/>

  <div class="content">
     <div id="div1"><p>Dolore magna  aliquam  erat volutpat.</p><p> Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>
     <div id="div1"><p>Suscipit  lobortis  nisl ut aliquip ex</p><p> ea commodo Dolore magna  aliquam  erat volutpat.</p></div>
     <div id="div1"><p>Dolore magna  aliquam  erat volutpat.</p><p>Suscipit  lobortis  nisl ut aliquip ex ea consequat.</p></div>
  </div>
</div>

need to show to show like this here many we can see. I need to show only one div at a time
similar

Answer 1

Here: http://jsfiddle.net/8HQKR/1/ or with toggling http://jsfiddle.net/8HQKR/3/. Just use jQuery show and hide functions on mouseup and down. You can also use .css(‘display’,’none’) and .css(‘display’,whatever). Or setting display:none; as a rule in a css class then addClass and removeClass. If you go by adding and removing classes, take a look at .toggleClass.