So I found some code from another member on here that was exactly what

Question

0

Asked: May 28, 20262026-05-28T07:05:27+00:00 2026-05-28T07:05:27+00:00

So I found some code from another member on here that was exactly what

0

So I found some code from another member on here that was exactly what I needed, but I couldn’t for the life of me find where to comment on it so asking here.

I have 2 buttons setup each one animating a div to slide down, but I can’t work out how each button can reverse the animation transition.

    $("#university").toggle(function(){
    $("#uniwork").animate({top:"0"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
});


$("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
});

When the #uniwork is in position, I want to be able to press #personal to reverse the animation of #uniwork div and allow the #personalwork div to animate.

Thank you in advance

HTML

<title>The Portfolio of Anthony Eamens</title>
<script type="text/javascript" src="scripts/Jquery.js"></script>
<script type="text/javascript" src="scripts/scroll.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#university").toggle(function(){
    $("#uniwork").animate({top:"0"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
});


$("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
});




});



</script>



</head>

<body>

<div id="main">
    <div id="content">
        <div id="homepage">
            <nav>   
                <ul id="navigation">
                    <li id="home"><a href="#"><img src="Images/01.png" alt="01"/><p>HOME</p></a></li>
                    <li id="about"><a href="#"><img src="Images/02.png" alt="01"/><p>ABOUT</p></a></li>
                    <li id="work"><a href="#"><img src="Images/03.png" alt="01"/><p>WORK</p></a></li>
                    <li id="contact"><a href="#"><img src="Images/04.png" alt="01"/><p>CONTACT</p></a></li>
                </ul>
            </nav>
            <div id="portfolioof">
                <img src="Images/the_portfolio_of.png" alt="The Portfolio of" width="300" height="60"/>
            </div>
            <div id="anthonyeamens">
                <img src="Images/anthonyeamens.png" alt="Anthony Eamens" width="540" height="95"/>
            </div>
            <div id="homedash">
                <ul id="homecircle">
                    <li id="graphicdesigner"><img src="Images/graphicdesigner1.png" alt="Graphic Designer"/></li>
                    <li id="macmonkey"><img src="Images/macmonkey1.png" alt="Mac Monkey"/></li>
                    <li id="totalnerd"><img src="Images/totalnerd1.png" alt="Total Nerd"/></li>
                </ul>
            </div>
        </div>
        <div id="aboutpage">
            <div id="abouttitle">
                <img src="Images/aboutme_title.png" alt="About Me" width="842" height="241"/>
            </div>  
            <div id="studentstaffs">
                <img src="Images/student_staffsuni.png" alt="Student at Staffordshire University" width="720" height="87"/>
            </div>
            <div id="aboutdash">
                <ul id="aboutcircle">
                    <li id="illustrator"><img src="Images/illustrator1.png" alt="Adobe Illustrator"/></li>
                    <li id="apple"><img src="Images/apple1.png" alt="Apple Inc"/></li>
                    <li id="coffee"><img src="Images/coffee1.png" alt="Coffee!"/></li>
                </ul>
            </div>
        </div>
        <div id="workpage">
            <ul id="workcircle">
                    <li id="university"><img src="Images/uni1.png" alt="University"/></li>
                    <li id="cv"><a href="Images/Anthony%20Eamens%20Curriculum%20Vitae.pdf"><img src="Images/CV1.png" alt="Currulum Vitae"/></a></li>
                    <li id="personal"><img src="Images/personal1.png" alt="Personal"/></li>
            </ul>
            <div id="workcontainer">
                <div id="uniwork">
                    <img id="uniworktitle" src="Images/uniwork.png" alt="University Work" width="180" height="60"/>
                    <ul id="uniwork_thumbs1">
                        <li id="thumb1"><a href="#"><img src="Images/workbox1.png" alt="Thumb 1" width="120" height="120"/></a></li>
                        <li id="thumb2"><a href="#"><img src="Images/workbox1.png" alt="Thumb 2" width="120" height="120"/></a></li>
                        <li id="thumb3"><a href="#"><img src="Images/workbox1.png" alt="Thumb 3" width="120" height="120"/></a></li>
                        <li id="thumb4"><a href="#"><img src="Images/workbox1.png" alt="Thumb 4" width="120" height="120"/></a></li>
                        <li id="thumb5"><a href="#"><img src="Images/workbox1.png" alt="Thumb 5" width="120" height="120"/></a></li>
                    </ul>
                    <ul id="uniwork_thumbs2">
                        <li id="thumb6"><a href="#"><img src="Images/workbox1.png" alt="Thumb 6" width="120" height="120"/></a></li>
                        <li id="thumb7"><a href="#"><img src="Images/workbox1.png" alt="Thumb 7" width="120" height="120"/></a></li>
                        <li id="thumb8"><a href="#"><img src="Images/workbox1.png" alt="Thumb 8" width="120" height="120"/></a></li>
                        <li id="thumb9"><a href="#"><img src="Images/workbox1.png" alt="Thumb 9" width="120" height="120"/></a></li>
                        <li id="thumb10"><a href="#"><img src="Images/workbox1.png" alt="Thumb 10" width="120" height="120"/></a></li>
                    </ul>
                </div>
                <div id="personalwork">
                    <img id="personaltitle" src="Images/personalwork.png" alt="Personal Title" width="180" height="60"/>
                    <ul id="personalwork_thumbs1">
                        <li id="thumb11"><a href="#"><img src="Images/workbox1.png" alt="Thumb 11" width="120" height="120"/></a></li>
                        <li id="thumb12"><a href="#"><img src="Images/workbox1.png" alt="Thumb 12" width="120" height="120"/></a></li>
                        <li id="thumb13"><a href="#"><img src="Images/workbox1.png" alt="Thumb 13" width="120" height="120"/></a></li>
                        <li id="thumb14"><a href="#"><img src="Images/workbox1.png" alt="Thumb 14" width="120" height="120"/></a></li>
                        <li id="thumb15"><a href="#"><img src="Images/workbox1.png" alt="Thumb 15" width="120" height="120"/></a></li>
                    </ul>
                    <ul id="personalwork_thumbs2">
                        <li id="thumb16"><a href="#"><img src="Images/workbox1.png" alt="Thumb 16" width="120" height="120"/></a></li>
                        <li id="thumb17"><a href="#"><img src="Images/workbox1.png" alt="Thumb 17" width="120" height="120"/></a></li>
                        <li id="thumb18"><a href="#"><img src="Images/workbox1.png" alt="Thumb 18" width="120" height="120"/></a></li>
                        <li id="thumb19"><a href="#"><img src="Images/workbox1.png" alt="Thumb 19" width="120" height="120"/></a></li>
                        <li id="thumb20"><a href="#"><img src="Images/workbox1.png" alt="Thumb 20" width="120" height="120"/></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="contactpage">
            <ul id="contactcircle">
                    <li id="facebook"><a href="http://www.facebook.com/profile.php?id=1169036305"><img src="Images/facebook1.png" alt="Facebook"/></a></li>
                    <li id="email"><a href="mailto:anthony.eamens@gmail.com"><img src="Images/email1.png" alt="Email"/></a></li>
                    <li id="twitter"><a href="https://twitter.com/#!/Dj_Squid2011"><img src="Images/twitter1.png" alt="Twitter"/></a></li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T07:05:27+00:00

Normally you can use

$(document).ready(function(){

    $('#button1').click(function(e){
        $('#uniwork').slideToggle();
    });

    $('#button2').click(function(e){
        $('#personalwork').slideToggle();
    });
});

Try the following code snippet, hope this will help you

$('#btn1').click(function(e){
    if(parseInt($('#div1').css('margin-top'))>0)
        $('#div1').animate({ 'margin-top': '0px'}, 500);
    else
        $('#div1').animate({ 'margin-top': '300px'}, 500);
});

I think this is what you want

$('#university').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

$('#personal').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

Please add style=”position:relative;” to both “uniwork” and “personalwork” div.

This is better

$('#university,  #personal').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

This works

    $("#university, #personal").click(function(e) {

        var target=$(this).attr('id')=='university' ? 'uniwork' : 'personalwork';
        var sibling=$(this).attr('id')=='university' ? 'personalwork' : 'uniwork';
        $('#'+target).animate({top: "0"}, {duration: 300});
        $('#'+sibling).animate({top: "-330px"}, {duration: 300});
    });

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

So I found some code from another member on here that was exactly what

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply