How to make custom animated accordion using Pug, SASS and jQuery ?



Instead of using old and boring accordion you can use Custom animated accordion using pug, sass and jQuery. It will give an awesome user interface to the client. And the best part is that we can change the animation effect of the accordion by replacing the class name. To change the class simply go to the animate.css and choose the class which full fill your requirement and paste it in the jQuery code.

Technology used:-

  • Pug

  • SASS

  • jQuery

To see the demo and source code go to custom animated accordion


How to give animation on the button when it is clicked using SASS and jQuery ?

Hi guys in today’s post I’m going to show you guys how to give animation on the button when user click on it.
So I uploaded the live example on the codepen from where you can see and can edit the file and make some more awesome stuff.

Click here to visit the pen.

How to make fully responsive todo list using jQuery ?

Hello amazing people! Today I’m gonna share my todo list code here. Well this todo list is so basic there is no database connectivity its only the design but yeah you can add the items by clicking on the add button, edit them by clicking on the particular title and delete them by clicking on the trash icon which is in the right of all the titles.

Follow the link to see the output

Copy and paste the following code in one page and save it with the html extension.
And your output will look like this:-




Click here to get Code



Instructions to use

To add items:- Click on the add button “+” on the top-right corner.

To edit items:- Click on the label/title and then start typing. Click any where on the screen to save the item you typed.

To delete  items:- Click on the delete button (looks like a trash icon) on the right corner of your particular item.

Share it if this is helpful ūüôā

On the web:-

Web addict is company now :)

Hi folks,
Recently we registered our company Web Addict. Where you can see our various work for companies, Beauty products, Startup and personal portfolio. You can just hire us in an attractive price based on your requirement..

Feel free to have to look on

How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<meta charset="utf-8">
*{padding:0px; margin:0px;}
 animation-direction:alternate reverse;
@keyframes demo
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext



<div class="box">
<h1>Keyframe Animation</h1>

<div class="box2">
<h1>By CSS3</h1>