Show Hide Divs
-
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/faqStackOverflow Code I’m trying to use:
http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jqueryPage I’m trying to implement it on:
https://bernesemountaindogsite.wordpress.com/about/frequently-asked-questions/The blog I need help with is: (visible only to logged in users)
-
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!
-
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
-
<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> -
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.
-
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.
-
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!
-
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?
-
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!
-
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.
-
I’m going to try the following that I just dug up:
http://jsfiddle.net/thurstanh/emtAm/2/
http://stackoverflow.com/questions/15095933/pure-css-collapse-expand-div
-
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!
-
- The topic ‘Show Hide Divs’ is closed to new replies.
WordPress.com Forums 