Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jason Veiga
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Veiga
Front End Web Development Techdegree Graduate 12,347 Points
Posted by Jason Veiga
.a{fill-rule:evenodd;}techdegree seal-36
Jason Veiga
Front End Web Development Techdegree Graduate 12,347 Points

I need help creating a "toggle button", please.

I am working on Front End Developer courses, and I need help on Project 7, please.

I have to create a Toggle Button but I don't remember a video teaching us how to do so.

Steven Parker
Steven Parker
229,784 Points
Steven Parker
Steven Parker
229,784 Points

Darn, it won't let me see the project (it is for techdegree subscribers only). Can you provide a link to the course that it is related to?

2 Answers

Steven Parker
Steven Parker
229,784 Points
Steven Parker
Steven Parker
229,784 Points

I can't see the techdegree-only project page, but typically a "toggle button" is just an HTML checkbox input with some CSS and/or JavaScript code to give it an appearance of a switch. Were there some course examples like that?

Just a guess, but the challenge might want the buttons included with the list items instead of in a separate div outside of the list. Also, to get both floated buttons against the right side you may need to add something like vertical margins to space them out.

Jason Veiga
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Veiga
Front End Web Development Techdegree Graduate 12,347 Points
Jason Veiga
.a{fill-rule:evenodd;}techdegree seal-36
Jason Veiga
Front End Web Development Techdegree Graduate 12,347 Points

I was able to create the toggle button, but it's not letting me move it to the right side of the page correctly.

Do you have any pointers on how to correctly position it on the page?

HTML:

<h3 class="title">Settings</h3>
    <div class="toggle">
        <ul>
            <li class="tgl">Send Email Notifications</li>
            <li class="turn">Set Profile to Public</li>
            <div class="movetoggle">
                <input type="checkbox" class="togglebutton">
                <input type="checkbox" class="togglebutton">
            </div>
        </ul>

CSS: 

input {
    -webkit-appearance: none;
    position: relative;
    width: 70px;
    height: 35px;
    border-radius: 25px;
    background-color: gray;
    transition background: .3s;
    outline: none;
    cursor: pointer;
}

input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
    background-color: white;
    transition: left .3s;
}

input:checked {
    background-color: rgb(115, 115, 181);
}

input:checked::after {
left: 70%;
}

.movetoggle {
   float: right;
}
Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey Jason Veiga 👋

Great work creating the toggles! 😄 For those interested in how to create them Dustin created a short workshop on how to do so 🙂

As for your question about positioning them I'd recommend changing the HTML structure. In the mockups they are side by side with their corresponding label so easiest would be if you tackle that in the HTML.

You could for example do something like this: 

<div>
  <label>Send Email Notifications</label> 
  <input type="checkbox" class="togglebutton" >
</div>

By default they should then start showing up side by side. After that change you could utilize flexbox and use justify-content to push the toggles to the end of the container 🙂

If you haven't done so already I also highly recommend joining the Slack community for Techdegree students where you'll find fellow students and dedicated staff to support with any Techdegree related questions and projects. You can find an invite link on the Slack community instruction page

Hope this helps you to get going again! 😄