Click on Search icon to make search bar appear

Site URL: https://caper-badger-3s6d.squarespace.com/blog

I currently have a cusstommade search icon (made in illustrator), I only want this search icon to be visible, and when clicked on, the search bar appears.

I also want to make this icon a bit smaller.

Can anyone help me with this?

Q1. This will require Business Plan + Script code.

Q2. Add to Design > Custom CSS

/* resize search icon */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1609720252520_14008 {
    width: 5%;
    margin: 0 auto;
}
}

1. I have the Business plan, what script code do I need to be able to accomplish what I want?

2. Thank you @tuanphan, that fixed the size!

On 1/10/2021 at 7:01 PM, SolveigTraeet said:

1. I have the Business plan, what script code do I need to be able to accomplish what I want?

2. Thank you @tuanphan, that fixed the size!

 

Add to Code Injection Header

<style>
  div#block-yui_3_17_2_1_1609719753415_7376 {
    display: none;
}
  .t-show {
  	display: block;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("div#block-yui_3_17_2_1_1609720252520_14008").click(function(){
  $("div#block-yui_3_17_2_1_1609719753415_7376").addClass("t-show");
});
</script>

@tuanphan Thank you for replying with a script code! I am not able to click on the search icon, do you know why?

22 hours ago, SolveigTraeet said:

@tuanphan Thank you for replying with a script code! I am not able to click on the search icon, do you know why?

Try again with this code

<style>
  div#block-yui_3_17_2_1_1609719753415_7376 {
    display: none;
}
  .t-show {
  	display: block;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $("div#block-yui_3_17_2_1_1609720252520_14008").click(function(){
  $("div#block-yui_3_17_2_1_1609719753415_7376").addClass("t-show");
});
})
</script>

@tuanphan Thank you for the code, but it still doesn't work when I inject the code in advanced-> Code injection Header. I don't know why this doesn't work?

On 1/14/2021 at 7:48 PM, SolveigTraeet said:

@tuanphan Thank you for the code, but it still doesn't work when I inject the code in advanced-> Code injection Header. I don't know why this doesn't work?

Can you add the code? We can check easier

@tuanphan Thank you for replying! But I have decided to drop the code, and just go for a simpler solution.