TIPS & TRICKS, TUTORIAL

4 snippet for the toggle module

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

Are you, like me, do not love the default design of the Module Toggle, then this tutorial is what you need to give a better look to your toggle with a bit of CSS.

For this tutorial I will use 4 custom CSS classes, which are: toggle_custom_1, toggle_custom_2, toggle_custom_3, toggle_custom_4.

Here is a short description of the various snippets:

  • Toggle custom 1: This snippet, move the icon to the left of the title, and with a simple animation, the icon rotates when the toggle is open.
  • Toggle custom 2: The second snippet, however, moves the title and the icon at the center, with a shadow effect when the toggle is open.
  • Toggle custom 3: The third snippet, replace the default icon with a down arrow, which rotates when the toggle is open.
  • Toggle custom 4:The fourth snippets, applies two border (top and bottom) that change color when the toggle is open.

If you want to use other icons for your toggle, you should read this excellent article, where you can see all the codes of the ET icons.

You can check out the live:

1. Add Toggle Module

First, I should make a new section and enter a Module Toggle.

Add Class

Add your content and when you finish your customizations, click on the Custom CSS tab and add the class that corresponds to the design that you want to apply.

Add CSS

Now, with a few lines of code, you will be able to rejuvenate your toggle :). All you need to do and choose the design you want and add the CSS code in your options panel or in your child theme. This is all. Simple, right?

Toggle Custom 1
/**************************** toggle custom 1 **************************/

.toggle_custom_1 {
border: none;
}

.toggle_custom_1.et_pb_toggle.et_pb_toggle h5 {
padding-left: 45px;
}

.toggle_custom_1 .et_pb_toggle_title:before {
right: 92% !important;
font-size: 40px;
content: "45";
-webkit-transition: 0.3s;
transition: 0.3s;
}
.toggle_custom_1.et_pb_toggle_open .et_pb_toggle_title:before {
color: #72c15f;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.toggle_custom_1.et_pb_toggle_close.et_pb_toggle.et_pb_toggle p {
border-left: 4px solid #72c15f;
padding-left: 33px;
margin: 2% 0 0 2.6%;
}

.toggle_custom_1.et_pb_toggle_open.et_pb_toggle.et_pb_toggle p {
border-left: 4px solid #72c15f;
padding-left: 20px;
margin: 2% 3.2%;
}
Toggle Custom 2
/**************************** toggle custom 2 **************************/
.toggle_custom_2{
	border: none;
}
.toggle_custom_2.et_pb_toggle_close {
    border-bottom: 3px solid #72c15f;
 }

.toggle_custom_2.et_pb_toggle h5.et_pb_toggle_title {
    text-align: center;
    padding: 20px 0 !important;
}

.toggle_custom_2 .et_pb_toggle_title:before {
    right: 45%;
    margin-top: 5px;
    font-size: 40px;
    content: "43";
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.toggle_custom_2.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
    animation: none;
}

.toggle_custom_2.et_pb_toggle_close.et_pb_toggle.et_pb_toggle p {
    margin: 4% auto;
    padding: 20px;
    border-top: 3px solid #72c15f;
    box-shadow: 0 16px 23px -11px rgba(0, 0, 0, 0.3);
}

.toggle_custom_2.et_pb_toggle_open.et_pb_toggle.et_pb_toggle p {
    margin: 4% auto;
    padding: 20px;
    border-top: 3px solid #72c15f;
    box-shadow: 0 16px 23px -11px rgba(0, 0, 0, 0.3);
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
Toggle Custom 3
/**************************** toggle custom 3 **************************/

.toggle_custom_3.et_pb_toggle {
    border: none;
    border-bottom: 4px solid #ddd !important;
    transition: 0.4s
}

.toggle_custom_3.et_pb_toggle_open{
    border-bottom: 4px solid #72c15f !important;
    }

.toggle_custom_3 .et_pb_toggle_title:before {
    font-size: 50px !important ;
    content: "3" !important;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.toggle_custom_3.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
Toggle Custom 4
/**************************** toggle custom 4 **************************/

.toggle_custom_4 {
    border: none;
    border-top: 4px solid #ddd;
    border-bottom: 4px solid #ddd;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.toggle_custom_4.et_pb_toggle_open {
    border: none;
    border-top: 4px solid #72c15f;
    border-bottom: 4px solid #72c15f;
}

.toggle_custom_4 .et_pb_toggle_title:before {
    font-size: 23px;
    content: "e064";
    transition: 0.5s;
}

.toggle_custom_4.et_pb_toggle_open .et_pb_toggle_title:before {
    color: #72c15f;
}

#Bonus

You can download the layout and CSS code clicking on the button. The layout already contains the entire CSS code. To change it click the Hamburger icon at the top-right of The Divi Builder.

Conclusion

With this bonus, you end this tutorial, and how could you see, with a few simple steps you can create a good look at the Module Toggle. Now tell me .. Which of these designs do you prefer? do you want to suggest a customization? Write it in the comments now.

Join over 18000 people and get the FREE stuff!

Write your email below and get the FREE Divi layouts you can use in your website with unlimited license.

Your email is safe 💌 . I hate SPAM same as you!