Currently, I have two divs that are being displayed one at a time using the toggle method.
Please refer to the screenshot below:
In the image provided, when the user clicks on "show more", the div will toggle based on the first item in the list. If the user clicks on "show less", the div will collapse again.
The issue I am encountering is that for the first and last items it works perfectly fine, but if I click on the second or third item, there seems to be a gap that is not being removed. Please see the screenshot attached. No specific height has been assigned to any of the divs.
This problem only occurs in Mozilla and not in any other browser...
Jquery :
$(".show_more_link").unbind('click').click(function(){
var divid = $(this).attr('id');
var show_more = "#show_more" + divid;
var show_less = "#show_less" + divid;
if($(show_more).is( ':visible' )){
$(this).text('Show more');
$(show_more).hide();
$(show_less).show();
} else {
$(this).text( 'Show less' );
$(show_more).show();
$(show_less).hide();
}
});