Home/ Questions/Q 8587937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T22:41:35+00:00

I actualy have some trouble with a function after a CSS class change. Here

  • 0

I actualy have some trouble with a function after a CSS class change.

Here is my Code.

<html>
<head>
    <title>jQuery Animate Test</title>
    <style>
    .animatebox { width: 300px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250; padding-left: 10px;}
    .hiddenstuff { opacity: 0; } 
    .boxtitle { font-size: 18px; font-weight: 100;}
    .clear { clear: both;}
    .arrow_up { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    .arrow_down { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    p {margin: 15px 0 0 0;}
    </style>
    <script src="jquery-1.8.2.js"></script>

</head>
<body>

<h1>Animate Test</h1>
<div id="content">
<div class="animatebox">
<img class="arrow_up" height="35px" src="arrow_up.png"><p class="boxtitle">Lala Box</p>
<div class="clear"></div>
<p class="hiddenstuff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata </p>
</div>
</div>


<script>

$(function() {
$('.arrow_up').click(function(){
   $('.arrow_up').attr('src',"arrow_down.png");
});
$('.arrow_up').click(function () {
    $('.arrow_up').addClass('arrow_down');
});
$('.arrow_up').click(function () {
    $('.arrow_up').removeClass('arrow_up');
});
});

$(".arrow_up").click(function () {
    $('.animatebox').animate ({
        height: '250px'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$(".arrow_down").click(function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

});

$(".arrow_down").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );
});


$(".arrow_down").click(function () {
    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});




</script>

</body>
</html>

After clicking the up buttons once it changes the class to “arrow_down”, but the function for the down animation wont work then?!? :/

UPDATE

$("body").on("click", ".arrow_up", function () {
        $('.arrow_up').attr('src',"arrow_down.png");
        $('.arrow_up').addClass('arrow_down');
        $('.arrow_up').removeClass('arrow_up');

        $('.animatebox').animate ({
            height: '250px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '1'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '28px',
            fontWeight: '700'
        }, 200 );
    });

    $("body").on("click", ".arrow_down", function () {
        $('.arrow_down').attr('src',"arrow_up.png");
        $('.arrow_down').addClass('arrow_up');
        $('.arrow_down').removeClass('arrow_down');

        $('.animatebox').animate ({
            height: '50px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '0'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '18px',
            fontWeight: '100'
        }, 200 );
    });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since it’s dynamic, use on. Also, you can shorten the code some:

    $("body").on("click", ".arrow_up", function () {
    $('.arrow_up').attr('src',"arrow_down.png");
    $('.arrow_up').addClass('arrow_down');
    $('.arrow_up').removeClass('arrow_up');

    $('.animatebox').animate ({
        height: '250px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$("body").on("click", ".arrow_down", function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});

    You don’t need an event handler for every single thing you’re going to do. This will be just fine (and probably a bit better with performance)

    Here is a working jsFiddle

    • 0