Home/ Questions/Q 689179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:18:21+00:00

Here’s a scenario… I have a column. In the column i have multiple divs

  • 0

Here’s a scenario…

I have a column. In the column i have multiple divs with text inside each one. A bit like a list of categories. Which ever one is SELECTED gains a different background colour.

What i would like to be able to do is use jquery so that when a different div is clicked on the background colour appears to slide behind the rest of the items until it reaches the one you selected.

Does anyone have any idea if this can be done? And if so any idea on Markup?

Any help is greatly appreciated.

There would be need to be a wrapper, a content container for each part and something that slides…

<div>
  <div class='slider'></div>
  <div>Content 1</div>
  <div>Content 2</div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Interesting request 🙂 You can do this with .animate() and a little bit of CSS, like this:

    <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   </script>
   <style type="text/css" >
    #content div { width: 200px; z-index: 2; }
    #content div.slider { position: absolute; background: #99AABB; z-index: -1; }
   </style>
 </head>
 <body>
<script language="javascript" type="text/javascript">
$(function(){
  $("#content div:not(.slider)").click(function() {
   $(".slider").animate({ top: $(this).offset().top, height: $(this).height() });
  });
});
</script>
  <div id="content">
    <div class='slider'></div>
    <div>Content 1 Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
    <div>Content 2<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div>
  </div>
 </body>
</html>

    Try it out 🙂 Just click on either div to see the effect. See a demo here

    The important bits:

    • Ignore the .slider div in the click handler
    • .animate() to same offset/height as destination div
    • Lower z-index so it shows up as the background
    • You could use an image, whatever’s in the CSS for the .slider div will work
    • 0