ghost1349 ghost1349 - 1 year ago 105
HTML Question

Show/Hide Text Every Time An Arrow Is Clicked

I need help showing/hiding text on a button click (specifically an arrow). I have a block of text that I have hidden and I need to slide it down in a time consistent with the arrow rotating 180 degrees. I also want it to do this only for the post above the arrow that was clicked. The solution I have come up with in this fiddle has many problems.

Here is the code:

$(function () {
var angle = -180,
height = "100%";
$(".down-arrow").click(function () {
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)',

'height' : height
angle -= 180;
height = "50px";

And these are the issues I am having:

  1. It slides down way too fast
  2. Once it slides back up it won't slide down again.
  3. It does it for every post

Answer Source

This would be more dynamic and clean to use:

  • First we will take height's of all the .blog-post div's in an array.

  • Now making height: 50px of the div, after once we know actual height of all the div's. Which will helpful in making div smooth slide as we know height's.

  • Next on click of arrow class, we will toggle class which holds transform:rotate properties. Along with that we would check corresponding .blog-post div's height. So if it is more than 50px we would make it 50px, else we would take it's actual height from array and give to it.

Here is the JS/JQuery Code:

var totalNum = $('.blog-post').length; // Counting number of .blog-post div on page.
var i, myArray = [];
for (i = 0; i < totalNum; i++) {
    var curHeight = $('.blog-post:eq(' + i + ')').outerHeight();

$('.blog-post').css('height', '50px');

$('.down-arrow').click(function () {
    var index = $('.down-arrow').index(this);
    var heightCheck = $('.blog-post:eq(' + index + ')').outerHeight();
    if (heightCheck < 51) {
        $('.blog-post:eq(' + index + ')').css('height', myArray[index] + 'px');
    } else {
        $('.blog-post:eq(' + index + ')').css('height', '50px');

Working : Fiddle

If you still do not understand feel free to ask.