Need help? Check out our Support site, then


Help with Code for checkbox hack FAQ section

  1. Hello there. I need help coding my FAQ section. I found the checkbox hack online and it seems it's perfect for my needs - however I can't make it work, I am too new to CSS.

    I currently am using a:hover to show the answers to my questions, however it seems tablet users can't access those as they need a on click kind of thing. So checkbox it is...

    Here is what I want:

    "Sample FAQ question that needs to trigger the checkbox when clicked?"
    "Answer that pops up underneath when checkbox is triggered. I want this to have the same design as the pop-up from the a:hover I am using right now (code below)."

    Here's the code I am using for my pop-up a:hover right now:

    .spoiler {
    }
    
    .spoiler:before {
    	content: "Are you licensed?";
    	color: #F48278;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .spoiler p {
    	display: none;
    }
    
    .spoiler:hover {
    	background-color: #FEF7F6;
    	border-top: 2px solid #F48278;
    	border-bottom: 2px solid #F48278;
    	margin-top: -4px;
    	padding-top: 2px;
    	padding-bottom: 4px;
    }
    
    .spoiler:hover p {
    	display: block;
    	margin: 1em 0 0;
    }

    Whats the proper CSS code and what's the html code to put into my post?

    The blog I need help with is littlegnomehome.com.

  2. Hi,

    Can you share the checkbox tutorial that you found?

  3. Hey...it's you! You really help me out a lot, thanks so much .-.

    Here's the tutorial code:

    div { position: relative; }
    input[type=checkbox] {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0;
    }
    h2 {
      font-size: 30px;
      font-weight: 400;
      color: #4a19ff;
      margin: 60px 0 10px 0;
    }
    label {
       cursor: pointer;
    }
    label {
      position: relative;
      display: block;
      padding-left: 30px;
      font-family: 'Spicy Rice', cursive;
    }
    label:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 50%;
      left: 10px;
      border-left: 8px solid black;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      margin-top: -8px;
    }
    input[type=checkbox]:checked ~ h2 label:before {
      border-left: 8px solid transparent;
      border-top: 8px solid black;
      border-right: 8px solid transparent;
      margin-left: -4px;
      margin-top: -4px
    }
    
    p {
      max-height: 0;
      overflow: hidden;
      padding-left: 30px;
      transition: max-height 0.4s ease;
      font-family: 'Habibi', serif;
    }
    input[type=checkbox]:checked ~ h2 ~ p {
      max-height: 80px;
    }
    
    body {
       background: #fbbe05;
       padding: 40px;
    }
  4. Sorry, I mean can I get the URL to the tutorial? I still have no idea how the end product should look like with the checkbox, so if I can see a demo, that would help :)

  5. Oh XD Here it is:

    Tutorial

    However, I need to adjust the look to be the same as I have it now (or as close as it gets)

  6. Hey,

    Thanks for the link! I got it now. I will need you to write the HTML with the structure similar to the tutorial, though. Only afterwards I can help with the CSS :)

    (Might be a good idea to create a new Page for this. Don't put the link on the menu so people can't see the page while we're working on it, then let me know the URL once you've written the HTML)

  7. Thanks...I'll try that tomorrow. I have even less of a clue about html compared to CSS, but how hard can it be...XD

  8. Alright I have spent along time trying this and I have no idea what I am doing. I don't know how to write the html code for this. I keep trying, but so far I got nothing :(

  9. Hi @enrooted, I tried using the sample code from the tutorial, and the checkbox stuff gets stripped out by WordPress, so this is going to be a no-go.

  10. Hey, yeah that's what happened to me, too. I have a problem with this because mobile users can not read the FAQs the way they are - but if I just write the answers it's way too long. I might just have to get rid of the FAQs all together the way it is now, I don't want a faulty website to leave bad impressions.

  11. I did a thing last night on making a larger image appear when a thumbnail was hovered over. Let me see if I can figure out a way to make that work for what you are wanting to do. I'll work on later today for you and see what I can come up with.

  12. Thanks for the offer! I actually have something set up on hover right now. That seems to be the problem when it comes to mobile users: mobile devices seem to need an on click event in order to display my FAQs properly - hover doesn't seem to work. But maybe you can figure it out >.<

  13. Yeah, I'm still looking at options. Let me see what I can do.

  14. fortunefaded212
    Member

    any update on this one?

  15. Not from me...I can't figure out anything else besides the hover option I am using right now.

  16. @enrooted and @fortunefaded212, the only solution I have is the one that works on hover. Nothing that works "onclick".

Topic Closed

This topic has been closed to new replies.

About this Topic