Show/Hide sticky icons on "Click", WordPress-CodePudding

https://jsfiddle.net/x5ue890v/1/

I have some sticky icons on my Wordpress site but how do I hide them based on "click" on the screen. Above link show you what I want to achieve.

I add:

html,body{
  width:100%;
  height:100%;   
}

to my theme CSS and:

function social_effect() { ?>
<script>
  $('body').click(function() {
  $('.ct-socials').toggle();});
</script>

<?php }

add_action('wp_head','social_effect');

to my theme "function.php" but doesn't work... Any solution?

Update
I want to hide:

<div >My Social Icon</div>

CodePudding user response：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

Just add this javascript line before the function

CodePudding user response：

Here try this. I dont't have all your code but this should work. Add all your script library inside the head or on top of your functions. Let me know

$(document).ready(function(){
  $('body').click(function() {
  $('.ct-socials').toggle(); 
  });
  
});

.ct-socials {
  width:300px;
  height:200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button>Click ME </button>
<div >
  <div>My Social Icon</div>
  <div>My Social Icon</div>

</div>

</body>