Question

I’m muddling my way through Javascript and could use experienced eyes on a bit of code. I’m trying to show/hide a div depending upon the open/close state of one of my accordion divs. I’m sure my code is an unholy mess so I’m posting here because I can’t seem to straighten it out (I’ve been at it for a couple of days so it’s not from lack of trying).
Here’s my script:

        <script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                alwaysOpen: false,
                active: false
            });
        $("h3#bubble").on("click", function(event, ui) {                
            if ("section#bubble").css(display","none") {
              $("#bg4-5").css("opacity", "0"); }
            else ("section#bubble").css(display","block") {
              $("#bg4-5").css("opacity", "1"); }
            });
        </script>

In case you’re wondering, the contents of #bd4-5 is a Spotify iframe that seems to need to be outside of the accordion to load completely on page load. So I’m resorting to this opacity trickery here to handle showing and hiding.

Thank you so much to anyone who takes the time to respond.

Answer 1

There are several syntax errors in your code:

if ("section#bubble").css(display","none") {

The if statement’s condition needs to be surrounded by parentheses. Plus you’re missing the $ and the opening quote just before display. Fixing those problems gives this:

 if ( $("section#bubble").css("display","none") ) {

…but that will set the display property and evaluate as truthy; I think you are trying to test the display property so you need this:

if ($("section#bubble").css("display") === "none") {

Then you have a similar problem on the else line:

else ("section#bubble").css(display","block") {

I think you mean else if, because a else (without the if) can’t have a condition. Again you are missing the $ to call the jQuery function, the opening quote before display and you are probably tring to test the current value of display rather than set it. And you need parentheses around the condition:

else if ($("section#bubble").css("display") === "block") {

Your code is also missing the final }); to close the document ready handler.

Here is my best guess at what you’re trying to do:

    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: false,
            alwaysOpen: false,
            active: false
        });
        $("h3#bubble").on("click", function(event, ui) {                
            if ($("section#bubble").css("display") === "none") {
               $("#bg4-5").css("opacity", "0");
            } else if ($("section#bubble").css("display") === "block") {
               $("#bg4-5").css("opacity", "1");
            }
        });
    });