Help with Code for checkbox hack FAQ section

  • Author
    Posts
  • #1810889

    enrooted
    Member

    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.

    #1810956

    hafizr
    Staff

    Hi,

    Can you share the checkbox tutorial that you found?

    #1810957

    enrooted
    Member

    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;
    }
    #1810958

    hafizr
    Staff

    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 :)

    #1810959

    enrooted
    Member

    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)

    #1810961

    hafizr
    Staff

    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)

    #1810962

    enrooted
    Member

    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

    #1810966

    enrooted
    Member

    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 :(

    #1810967

    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.

    #1810968

    enrooted
    Member

    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.

    #1810969

    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.

    #1810970

    enrooted
    Member

    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 >.<

    #1810971

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

    #1810972

    any update on this one?

    #1810973

    enrooted
    Member

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

    #1810974

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

The topic ‘Help with Code for checkbox hack FAQ section’ is closed to new replies.