Question 30187 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Show/Hide sticky icons on "Click", WordPress

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 class="ct-socials std-tab-slide">My Social Icon</div>

Tags:

2

Answers


  1. 0

    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 class="ct-socials std-tab-slide">
  <div>My Social Icon</div>
  <div>My Social Icon</div>

</div>

</body>
    Login or Signup to reply.
  2. 0 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

    Just add this JavaScript line before the function

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search