There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle().
I attempted this approach without success:
$('#red, #pink').click(function() {
// Depending on the id property of the clicked element
// This selects either #reddef or #pinkdef element
if($('#' + this.id + 'def').is(":visible")) {
$('#' + this.id + 'def').css('visibility','hidden');}
else if($('#' + this.id + 'def').is(":hidden")) {
$('#' + this.id + 'def').css('visibility','visible')}
});
When I click on #red, then #reddef disappears while maintaining its space. However, when clicked again, nothing happens. There appears to be a minor detail I'm currently missing, but I can't seem to figure out what it is.