TIPS & TRICKS, TUTORIAL

4 snippet for the toggle module

Fabio Sarcona, Web Developer, Italy

26 Apr 2016

6 Shares

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:

LIVE DEMO

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.

DOWNLOAD FILE

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.

Share6

6 Shares

Subscribe for FREE Divi Tutorials, Offers, Freebies & More!

Write your email below and get the FREE Divi layouts and our course "How to build your web design brand".

12 Comments

lucas klaas on 08/06/2018 at 6:17 pm

Hi, I’ve been looking for solutions on how to make the toggle to open sideways instead of dropdown
Vivian on 23/09/2018 at 7:57 am

I love this so much! Thank you 🙂
- Fabio Sarcona on 09/10/2018 at 6:28 am
  
  thanks to you Vivian!
Robert on 03/05/2019 at 5:16 pm

Nice one!
Thanx a lot.
Bill H on 10/09/2019 at 3:37 am

It looks like WordPress 5.2.3 breaks the CSS. I was using design 3 with a down arrow and it worked great for a month before the last WordPress update. Then the arrow disappeared completely. At least yours still shows the plus sign… Any ideas?
Bill on 10/09/2019 at 9:27 pm

Worked great until the latest Divi update. Now the example 3 (up/down arrow) no longer works. Arrow disappeared completely.
Zed on 12/10/2019 at 9:44 pm

Hi- When I use the toggle 2, it shows 2 arrows, one left and one down. I’m not sure how to make it only have the down arrow
Gaetano on 08/11/2019 at 6:41 pm

You made my day. Thanks man!
Aftab on 29/12/2019 at 4:27 pm

Thanks, It’s a good help but how can the toggle get automatically closed once next toggle is clicked?

It would be really nice if you can update or add css code for that 🙂
- Adira on 15/07/2020 at 11:48 am
  
  Use Accordin instead of toggle.
Anthony Craft on 02/04/2020 at 4:30 pm

Hi
Love the option #1 but I would still like to have the + icon instead of , how do I change the custom toogle #1 css to incorporate this?
Stuart on 01/03/2021 at 2:26 pm

Great work I was trying to get my head around how to do this, just one thing how can i reduce toggle_custom_1 to just one arrow?