Trying to hide an element with jQuery via clicking another element on the page-CodePudding

Apologies as it has been a few years since I have done much with jquery, I am in a marketing role now but my employer really wants me to add this functionality to the site.

I am trying to have a page where I click a tab and it hides an image loaded at the top of the page. tried repurposing an old bit of code but no dice :(

JS:

      jQuery(document).ready(function( $ ){

$( ".contacttabbyheaders" ).click(function() {
    $( ".hideonclick" ).css( "display", "none" );
});
 //} /* extra, cause of breaking */
});

HTML:

<img  src="https://linestar.ca/wp-content/uploads/2022/07/Map.png" alt="" width="auto" height="300px !important"  style=" margin-left: auto; margin-right: auto; display: block; max-height: 350px" />

 <br>

 [tabby title="British Columbia" ]

Sorry again for the bad code, I no longer do coding and don't plan on getting back into it just need this fix!!

CodePudding user response：

you have defined two classes in img tag merge them

<img  
     src="https://linestar.ca/wp-content/uploads/2022/07/Map.png" alt="" 
     width="auto" height="300px !important" 
     style="margin-left: auto; margin-right: auto; display: block; max-height: 350px" />