There is a need to update the displayed image. The two images are stacked on top of each other, with one having an opacity of 100 (active) and should be positioned above the inactive one based on z-index. The inactive image has an opacity of 0. When one image is clicked, the other should switch to 100 opacity and a higher z-index. (animations are not a priority).
- The initial oddity: when the page loads, the downward arrow is visible even though it lacks the active class.
- The second oddity: clicking on the image does not trigger any action.
HTML:
<div id="menu_container">
<table>
<tr>
<td>
<h1>Open Menu</h1>
</td>
<td>
<img src="arrow_up.gif" alt="arrow" class="arrow_up active_img"/>
<img src="arrow_down.gif" alt="arrow" class="arrow_down"/>
</td>
</tr>
</table>
</div>
CSS for normal and active images:
#menu_container table tr td img {
width:50px;
height:50px;
opacity:0%;
cursor:pointer;
display:block;
position:absolute;
bottom:0px;
position:absolute;
z-index:1;
}
.active_img {
width:50px;
height:50px;
cursor:pointer;
opacity:100;
position:absolute;
z-index:2;
}
Lastly, the script itself:
var menu = function() {
$('.arrow_up').click(function() {
$('#header').animate({top: '10%'}, 300);
$('#menu_container').animate({top: '15%'},300);
var active = $('.active_img');
active.removeClass('active_img');
active.next().addClass('active_img');
$('#menu_list').show();
});
$('.arrow_down').click(function() {
$('#header').animate({top: '50%'}, 300);
$('#menu_container').animate({top: '55%'},300);
var active = $('.active_img');
active.removeClass('active_img');
active.prev().addClass('active_img');
$('#menu_list').hide();
});
};
$(document).ready(menu);