My query pertains to JavaScript: how can I create an effect where clicking the jump-down button opens a text box and causes the button to change direction and rotate?
I am considering using two photos - one hides when the jump-down button is clicked, and the other replaces it. However, I'm unsure of how to achieve this in JavaScript (the CSS code for imageButton2 isn't working). Here's my current code:
$(function () {
$("#jump_down").click(function () {
$("#wrapper").slideToggle("slow");
})
})
var show1=true;
$('#jump_down').click(function(event) {
document.getElementById('jump_down').style.visibility = show1 ? 'visible' : 'hidden';
document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
show1 = !show1;
})#jump_down{
position: relative;
display: inline-block;
width: 100%;
background-color: rgba(150,190,250,0.7);
padding: 20px 0;
}
#jump_down img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#wrapper{
background-color: rgba(164,231,246,0.8);
overflow: hidden;
}
#ImageButton2 img{
width: 3%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" onClick="swapButtons(false)" style="visibility: visible; "></a>
<img src="http://dl.20script.ir/tools/back-up/UpBtn_20Script_2.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<div id="wrapper">
<p>
Hellow
</p>
</div>
</body>