slideToggle / slideUp/ slideDown

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.

It sounds like you’re wanting an accordian, and as you’re already using jQuery you may be interested in the jQuery UI accordian that they provide for you.

Hi, i have already tried to use accordian, it doesnot work. After going through lot of articles and examples ,it’s,toggle that makes it work .

Below, i have posted the code. here on clicking the button , first it slides down , show div and then again clicking it slides up and shows below div.

Now, i want it vice-versa. first, the top div should show,click the button, slide up , hide top div , button goes up and changes word to slide down and show bottom div and then again click,slide down, and show above div. can anyone modify the code below to get this. also, i need to add arrow, and i am wondering on code to change an arrow up and down as the button slide up and down.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Untitled Document</title>

<script type=“text/javascript” src=“jquery-1.4.2.min.js”></script>

<script>
$(document).ready(function(){
$(“#myButton”).toggle(function(){

 $("#content").slideDown();
$(this).val("Slide Up");
$("#content1").hide();

},function(){

$("#content").slideUp();
$(this).val("Slide down ");
$("#content1").show();

})

});

</script>

<style type=“text/css”>
Content{
display:none;
}

#content1{
display:none;
}
</style>

</head>

<body>

<div id=“content”>
bla bla bla bla bla bla bla bla blabla bla blabla bla bla
</div>
<input type=“button” id=“myButton” value=“Slide down”/>

<div id=“content1”>
hgggjjjghjhj

</div>

</body>
</html>

Thanks a ton.

Perhaps that needs to be investigated then. It’s much much easier to implement one from a library that’s dedicated to making it as easy as practical, than it is to get a custom attempt at an accordion working.

Having said that though, I’ll be able to take a look at your attempt of a custom one at some stage soon.

The problem that you are facing is that the toggle method does not work in the manner that you are attempting. It hides the element(s) that you use it on, that being the button, and it ignores those functions that you pass to it.

So instead of that, you can use .on(‘click’, …) and inside of that function you can check if the button value is what it starts with, which lets to easily switch between one set of statements or another.

Hmmmm…If you can put here in code, it would help in completing the work . This script part is where I am stuck.
So, can you give me the sloution in the form of code. Very much appreciate it.

Thanks a ton.

Well okay - the event part of things is:


$("#myButton").on('click', function() {
    ...
});

and in there is where you check if the button value is what it starts with, which is:


if (this.value === 'Slide down') {
    ...
} else {
    ...
}

Or, a potentially better different solution is to toggle a class on the button, which could be useful for the presentation side of things too.


$(this).toggleClass('active');
if ($(this).hasClass('active')) {
    ...
} else {
    ...
}

As another solution, you can bring the once-deprecated toggle function back again under another name.


$.fn.toggleClick = function(){
    var functions = arguments ;

    return this.click(function(){
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments);
            iteration = (iteration + 1) % functions.length ;
            $(this).data('iteration', iteration);
    });
};

Which should result in your original code working once again, when you use:


$("#myButton").toggleClick(function() {
    ...
}, function () {
    ...
});

Thanks. I will try this and get back.

Here’s some sample code that demonstrated each of these techniques.

If I had my preference, it would be none of the above-mentioned techniques.

The last one on the sample code is my preferred technique, where standard visibility toggle methods are used instead.


// Toggling visibility
$('#button4').on('click', function () {
    var text = $('#content4before').is(':visible') ? 'Slide down' : 'Slide up';
    $(this).val(text);
    $('#content4before').slideToggle();
    $('#content4after').toggle();
});

Or perhaps even using a goingDown boolean, which helps to guarantee that content4afterwards will have the opposite visibility of content4before


$('#button4').on('click', function () {
    var goingDown = $('#content4before').is(':visible');
    $(this).val(goingDown ? 'Slide down' : 'Slide up');
    $('#content4before').slideToggle();
    $('#content4after').toggle(goingDown);
});

Hi Paul ,

Thanks for such a detail explanation. This is great. It works.

Thanks a ton.

Hi paul, got a question related to this topic.

I am using this concept in 3 pages in different scenarios. it works perfect in 2 scenarios. the third one is of the table.

i need to hide and show the body of the table, the header remains the same. just the body alone i need to show /hide , with the button on click goes up and comes down back to same position again onclick. the button would come after <tbody>. so, i introduced a class for the table body and tried to call that in script. but it does not do anything.I have given the table outline.

Can you give an insight in to- how to do this?

<div class=“csi-table”>
<table class=“csi-table-one”>
<thead>
<tr>
<th>ID</th>
<th>First Name </th>
<th>Last Name </th>
<th>CSI No </th>
<th>Department</th>
</tr>
</thead>
<tbody class=“csi-body-one”>
<tr>
<td> datas display </td>
<td> datas display </td>
<td>datas display</td>
<td>datas display</td>
<td>datas display</td>
</tr>
</tbody>
</table>
</div>

thanks.

That much of things seems to work without trouble.

The content that you showed seems to be okay. What info can you reveal about the button, and how you are triggering it? Can you provide a test page that demonstrates the problem so that we can troubleshoot it?

Hi,

I am posting a mock up (code). sorry, did not have time to create this in external site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
    $('#button1').on('click', function () {
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
           
             $('.content4before').slideUp();
            $(this).val('Slide down');
            $('.content4after').show();
            
        } else {
             $('.content4before').slideDown();
            $(this).val('Slide Up');
            $('.content4after').hide();
            
           
        }
    });
});
</script>



<style type="text/css">

.table-5 {
	background-color: #f5f5f5;
	padding: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #ebebeb;
}
.table-5 td, #table-5 th {
	padding: 1px 5px;
}
.table-5 thead {
	font: normal 15px Helvetica Neue,Helvetica,sans-serif;
	text-shadow: 0 1px 0 white;
	color: #999;
}
.table-5 th {
	text-align: left;
	border-bottom: 1px solid #fff;
}
.table-5 td {
	font-size: 14px;
}
.table-5 td:hover {
	background-color: #fff;
}

.content4after
{
	display:none;
}


</style>

</head>
<body>
<div class="content4before">

<table class="table-5">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>Website</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>johnsmith@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Peter</td>
			<td>James</td>
			<td>peterjames@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Ronald</td>
			<td>Weeley</td>
			<td>ronweeley@example.com</td>
			<td>http://www.example.com</td>
		</tr>
	</tbody>
   
    <tbody>
    <tr>Slide up and show content below</tr>   <!-- anoter tbody,would handle class , thought i could use this to slide but again that messed up-->
    </tbody>
</table>

</div>

<input id="button1" type="button" value="slide up" />

<div class="content4after">


<table class="table-5">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>Website</th>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Smith</td>
			<td>johnsmith@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Peter</td>
			<td>James</td>
			<td>peterjames@example.com</td>
			<td>http://www.example.com</td>
		</tr>
		<tr>
			<td>Ronald</td>
			<td>Weeley</td>
			<td>ronweeley@example.com</td>
			<td>http://www.example.com</td>
		</tr>
	</tbody>
    
</table>

</div>




 </body>
 </html>

i have used the previous script concept here.
There are 2 things in this html and jquery. One, i need to add button at the end of the body of the table and the button should take the whole body width, colspan=4. i tried , did not work. second, the script part. only the body of the table should slide up/down and button too goes up and down along with the body sliding. the header of the table does not change or move. it has to be static.

for this demonstration , i display this with 2 separate tables. i am wondering how to handle only body slideup/down.what should i do? Is it possible demonstrate it?

Thanks.

Hey Paul just ignore the above questions. As I am modifying the tasks and working on them. If needed, will get back.

But curious to find out the solution for above. If you can, plz post it.

Thanks a ton.

A footer section would easily achieve that. It needs to go between thead and tbody.


<thead>
...
</thead>
<tfoot>
    <tr>
        <td colspan="4"><input id="button1" type="button" value="slide up" /></td>
    </tr>
</tfoot>
<tbody>
...
</tbody>

The button can then be made to take up the whole width of the table, with the following CSS:


#button1 {
    width: 100%;
}

In order to achieve that, the header would need to be extracted out to a separate table that goes before the first one. That can eb tricky to achieve while maintaining things such as the columns in the same position, so jQuery plugins such as Fixed Header Table have been created to make that task easier for you.