Question

I wish to show/hide content on click, and am setting the CSS opacity rather than using toggle() or hide() and show() as I wish to have the content still occupy space on the page.

Here is the problem page (click the wee button in the top right to hide/show content): http://indigobrazilianportuguese.com/about-us/

And the jQuery:

$('.close').toggle(function() {
    $(this).siblings('p').text('Show content');
    $('#container').css('opacity', 0);
    $('#footer-container').css('opacity', 0);
}, function() {
    $(this).siblings('p').text('Show image');
    $('#container').css('opacity', 1);
    $('#footer-container').css('opacity', 1);
});

Works ok in Firefox and Opera, but not Chrome or Safari.

In Chrome and Safari the screen needs to be refreshed for it to work (e.g. when I resize the browser window the content is shown/hidden) although on other pages on the site the same button works fine…

Also tried adding adding/removing classes to apply the CSS opacity changes with no luck.

Any tips? Open to using an alternative to CSS opacity. Thanks!

Answer 1

If you want it to occupy space then use visibility:hidden

Do the addClass and removeClass but use visibility instead of opacity and see if you get what you want

see http://www.w3schools.com/cssref/pr_class_visibility.asp