<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <main class="container-fulid mt-4">
    <h1>Show, Hide & Toggle Effects of jQuery</h1>
    <button type="button" id="cmt" class="btn btn-danger">Click Me Toggle</button>
    <p id="para1">Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
    </p>
    <button type="button" class="btn btn-primary" onclick="$('#para2').hide(); iamclick();">Click Me Hide</button>
    <button type="button" onclick="$('#para2').show('slow',function(){iamclick();});" class="btn btn-warning">Click Me Show</button>
    <button type="button" id="cm" class="btn btn-info">Click Me</button>
    <p id="para2">Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
    </p>
  </main>

</body>

</html>
$(document).ready(function(){
  $('#cmt').click(function(){
    $('#para1').toggle(1000,function(){
      alert('Yes i am working toggle.');
    });
  });
  
  $('#cm').on("click",function(){
    $('#para1, #para2').hide();
  })
  
});

function iamclick(){
  alert('Action is complete.');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js