now we are going to create a follow unfollow button like instagram follow button :-
setps :-
1. create a HTML page
2. add jquery CDN script(also can download jquery) .
3. create to button in html as follow and following
4. add jquery to follow button when it has clicked and
hide follow button and show following button ...
let's follow these code :-
Code :-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style>
.follow_btn{
width:10em;
margin:100px;
}
.follow_btn:active{
box-shadow:1px 9px 31px #1131;
}
.follow_btn div{
padding:5px;
color:#37b4e6;
cursor: pointer;
font-weight:bold;
font-style:normal;
font-family: sans-serif;
border-radius:2px;
text-align: center;
border:1px solid #37b4e6;
}
#unfollow{
text-align:left;
background:#37b4e6;
font-weight:bold;
font-style:normal;
font-family: sans-serif;
color:white;
}
#unfollow i{
margin-left:10px;
margin-right:12px;
}
.follow_btn #follow2{
display: none;
text-align:center;
background:white;
font-weight:bold;
font-style:normal;
font-family: sans-serif;
color:#37b4e6;
}
</style>
</head>
<body>
<center>
<div class="follow_btn">
<div id="follow">Follow</div>
<div id="unfollow"><i class="fa fa-check" style="float:left;"></i> Following</div>
<div id="follow2">Follow</div>
</div>
</center>
<script>
$('#unfollow').hide();
$('#follow').click(function(){
$('#unfollow').toggle();
$('#follow').hide();
$("#follow").empty();
});
$('#unfollow').click(function(){
$('#unfollow').hide();
$("#follow2").show();
});
$('#follow2').click(function(){
$('#unfollow').show();
$("#follow2").hide();
});
</script>
</body>
</html>
0 Comments