如何使用 jQuery 在 Wordpress 中隐藏一个 div，并在隐藏另一个 div 时显示它？

Question

Somehow this doesn't work. The #autoverkocht should be hidden by default, unless the.b-car-info__price is hidden, #autoverkocht should be shown.

jQuery(document).ready(function($){
$("#autoverkocht").css({   
    display: "none",
    visibility: "hidden"
});
})

if($('.b-car-info__price').is(":hidden")){


      $('#autoverkocht').css('visibility', 'visible');
}

It's either the jQuery above or the functions.php code below that doesn't work.

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
    'your-script', // name your script so that you can attach other scripts and de-register, etc.
    get_template_directory_uri() . '/js/autoverkocht.js', // this is the location of your script file
    array('jquery') // this array lists the scripts upon which your script depends
);

}

Answer 1

You can use inline styling like below:

<div id='autoverkocht' style='display: none;'>
</div>

or use css styling like this:

#autoverkocht{
  display: none;
}

And in the jquery do this:

<script>
  jQuery(document).ready(function($){ 
    if($('.b-car-info__price).is(":hidden")){
      $('#autoverkocht').show();        
    }
  });

</script>

Answer 2

Think jQuery toggle and hide is what you need.

$('#autoverkocht').hide()
$('#autoverkocht, .b-car-info__price').on(
  'click',
 function() 
 {
   $('#autoverkocht, .b-car-info__price').toggle()
 }
);

Hope this is what you require......