Dear Experts,
I wanted to achieve an effect to switch the position of the 2 HTML Divisions when they are clicked.
So when clicked, the top will shift to the bottom and bottom will shift to the top.
Here is what I can come up with
<html>
<head>
<script type="text/javascript">
$(document).ready(
function(){
$('div').click(
function(){
$(this).insertBefore($(this).next());
}
);
}
)
</script>
<style type="text/css">
body{
margin: 0;
}
#top{
height: 100px;
width: 100px;
background: rgb(206,206,203);
}
#bottom{
height: 100px;
width: 100px;
background: rgb(226,206,203);
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
</html>
I know there is a way to select the specific Element using class in the Jquery selector as follows
<script type="text/javascript">
$(document).ready(
function(){
$('div').click(
function(){
**$('#bottom').insertBefore('#top');**
}
);
}
)
</script>
But I just wanted an generic way to shift elements with arbitrary names and class names.
Thanks in advance.