Show Hide Divs

  • Author
    Posts
  • #2874558

    boomfoxx
    Member

    Hi,

    I’m trying to implement show/hide divs in my FAQ section. I’ve tried adding custom css and then adding the correct identifiers to my content but nothing I’ve tried has seemed to work. Is this even possible with a wordpress.com account with the custom features enabled?

    Example of what I’m trying to do:
    https://www.microsoft.com/en-us/software-download/faq

    StackOverflow Code I’m trying to use:
    http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery

    Page I’m trying to implement it on:
    https://bernesemountaindogsite.wordpress.com/about/frequently-asked-questions/

    The blog I need help with is bernesemountaindogsite.wordpress.com.

    #2874622

    kathrynwp
    Staff

    Hi Kat, any solution for WordPress.com would need to work without JavaScript or form elements like input, which aren’t allowed here.

    I tested one of the methods in that StackOverflow post and it worked – it’s the one under the heading “Using :target.” You’d put the HTML part in your post, and the CSS chunk in your custom CSS editor.

    Let me know how it goes!

    #2874671

    boomfoxx
    Member

    Hi Kathryn,

    Thank you for the suggestion of using the “Using:target” method. I have it almost working now. For some reason when a user clicks on the heading or question though, it jumps to further down on the page then it should. Any ideas?

    https://bernesemountaindogsite.wordpress.com/about/frequently-asked-questions/#targ_1

    #2874672

    boomfoxx
    Member

    <h1>Appearance</h1>

    <div class=”collapse”>
    How big will a Bernese Mountain Dog be when full grown?
    <div id=”targ_1″><b>Males:</b> Height at the withers is 24-28 in (61-71 cm) Weight is 85-110 lb (39-50 kg)
    <b>Females:</b> Height at the withers is 23-27 in (58-69 cm) Weight is 80-105 lb (36-48 kg)
    (Withers = the ridge between the shoulder bones)</div>
    </div>

    <div class=”collapse”>
    Collapse 2
    <div id=”targ_2″>Content 2….</div>
    </div>

    #2874673

    kathrynwp
    Staff

    Looks like the admin bar interfering here. If you use it with an incognito/private window it isn’t an issue.

    I would recommend you change your bold paragraphs like:

    <strong>What qualities should I look for in a trainer?</strong>

    to heading tags, like h2, h3, etc.

    You could then try adding custom CSS to add some top margin to the top of that heading on this page and see if that helps. I can help you with the code if you need it, once you change a couple of the headings.

    #2874674

    boomfoxx
    Member

    Alright, got that changed over, cleared my cache and looking at things in the incognito mode but I’m still seeing the weird jumping issue.

    It also looks as though when I open one tab opens, the others close, which is just fine, as long as I can get the jumping under control.

    I would love your help with the code if you have suggestions. This is new territory for me.

    #2874675

    kathrynwp
    Staff

    It also looks as though when I open one tab opens, the others close, which is just fine, as long as I can get the jumping under control.

    Yes, I noticed this too on the Stack Overflow example. I think that’s how this works.

    What you have so far is a little hard to test. Can you put your two test questions in h4 tags as well?

    Then put this in your custom CSS:

    .page-id-49 #content h4 {
      padding-top: 60px;
    }

    But I’ll be able to help more once you put those first two questions in h4 tags. Thanks!

    #2874676

    boomfoxx
    Member

    Done!

    That addition seemed to help make sure the page jumped to the answer of the question. If I increase the padding will this help bring the page down?

    #2874677

    kathrynwp
    Staff

    Let’s try this instead.

    Remove:

    .page-id-49 #content h4 {
         padding-bottom: 20px;
         padding-top: 20px;
    }

    On each element where you now have a target ID like id=”targ_1″, try adding a new class, in addition to the ID.

    So for example:

    <div id="targ_1">
    Males: Height at the withers is 24-28 in (61-71 cm) Weight is 85-110 lb (39-50 kg)
    <br>
    Females: Height at the withers is 23-27 in (58-69 cm) Weight is 80-105 lb (36-48 kg)
    <br>
    (Withers = the ridge between the shoulder bones)
    </div>

    becomes:

    <div id="targ_1" class="answer">
    Males: Height at the withers is 24-28 in (61-71 cm) Weight is 85-110 lb (39-50 kg)
    <br>
    Females: Height at the withers is 23-27 in (58-69 cm) Weight is 80-105 lb (36-48 kg)
    <br>
    (Withers = the ridge between the shoulder bones)
    </div>

    Add the same answer class to each of these divs, starting with the first 4-5 to make sure it’s working as you want.

    Then add this to your custom CSS:

    .answer {
        padding-top: 60px;
    }

    Let me know how it goes!

    #2874678

    boomfoxx
    Member

    Great idea, and I tried it. The problem with putting the padding on the answer class is now there is a huge gap between the answer and the question. Functionally, it works exactly right, design-wise not so much.

    The class “collapse” is displayed as a block. Could I pad the whole block perhaps? I am not sure what part of the code is telling the div where to open to. It looks like it automatically sends the div to the top of the page when it is toggled when I just want it to stay wherever the user is instead.

    #2874679

    boomfoxx
    Member
    #2874680

    boomfoxx
    Member

    I think this might work. It’s going to take some work to get things sorted out properly but I think the summary and details tags will better suit my needs, PLUS it’s all CSS friendly!

    If you have any ideas I’m still all ears!

    Thank you so much for your back and forth and help, it’s been extremely helpful!!!

    Cheers!

    #2874681

    kathrynwp
    Staff

    That looks promising! Let me know how it goes.

The topic ‘Show Hide Divs’ is closed to new replies.