Hi friends,

On sliding up, the div1 above the slide gets hidden and the link goes up and changes word as slide down and arrow changes to downwards and there is a div2 that shows below. On sliding down, the div2 hides and div1 shows. And the word on link change back to slide up and arrow pointing up.
This is the scenario I am currently working. I identify the functions that I need to use in JQuery like,slidetoggle,toggle,slideup,visibility in css but I am stuck on how I write code to combine these JQuery functions.

The code I have slides up and hides the div. but does not show the below div and I am wondering how to change the words and arrow on sliding up and sliding down. Now, I need help from experience persons on how to implement it.

The code I posted below is what I have. If anyone can modify this or give a whole new code for the above scenario, would be of great help.

<script>
$(document).ready(function(){
$(".heading").click(function(){
$(".mytable").slideToggle();

})
});

</script>


<body>

<div id="childtable">

<div class="mytable">
Hi I am a table
</div>

<div class="sliding">
<p class= "heading"> slide up </p>
<div class="show">
This content needs to displayed on slide up
</div>
</div>

</div>

</body>




Thanks.