Anyone know how to add a heading style to show/hide expandable text?
-
I’ve managed to add a show/hide code in my What we do page – but the arrows you click on, to expand upon the summary, appear on the line above the summary! Does anyone know what I’m doing wrong?
Page in question is:
See http://palmerowen.wordpress.com/learn-about/Code I’ve put in is:
<details>
<h3>All websites now need to be mobile</h3>
The stats say that people look online on their phones or tablets as much as their desktops. The evidence is there for yourself – everyone about is unable to look up from their phones! Businesses would be foolish to not create a website that works on all formats.
</details>The blog I need help with is: (visible only to logged in users)
-
<details> element is not yet supported in two of the popular browsers: Internet Explorer and Firefox. Are you sure you would like to use it?
You can add <summary> Summary text </summary> right after the opening <details> element to show custom summary text instead of “Details” next to the right-pointing arrow.
I did not quite understand what you mean by:
the arrows you click on, to expand upon the summary, appear on the line above the summary!
-
Hope you get this – replying by email.
From what I’ve seen, where it doesn’t work – it’s just shown in full. So keeping things reasonably brief!
Not sure I get your response but not looking at the code right now. What I could do with is someone just telling me to style the summary text with h3 style – whilst keeping the shoe/hide code working! When I do it it breaks!
If you view it on chrome, you’ll see what I mean about the arrows. Try clicking on the details links – you’ll see how it looks when expanded – with arrow above etc!
Thanks
Sent from my iPhone -
Sorry – just been in to look at my code and I had changed it a bit since I posted my question.
However, when I change it to how you advise – it goes how I originally had it i.e. arrow appears above summary title. I have reapplied it with the top one again for you to see ‘All websites now need to be mobile.’ But I can only see this in Chrome as my other browsers don’t recognise it. It does do the same in iOS however too..
I might have a tinker with the next sections down from that one. If i get it working, I’ll let you know.
-
What I could do with is someone just telling me to style the summary text with h3 style – whilst keeping the shoe/hide code working!
Here it is:
.entry-content p { font-size: 27px; font-family: league-gothic-1,league-gothic-2,"Open Sans",sans-serif; color: #7C7C7C; }Please let me know how it goes and feel free to ask further questions :-)
-
Hi, thanks for helping but this isn’t quite what I was looking for! I want to create expandable show/hide text that has a heading style set on the summary text. The code you’ve provided just makes my main copy the same as my heading style (as far as I can see!) Currently, in Chrome and iOS (the only browsers I can see where it works), the arrow is on the line above the heading.
Not only this, the WordPress cms seems to throw out my summary tags a lot. So its possible that all you’ll see is the word ‘details’ with the arrow next to it when you look – which when you click on it, it expands to show the summary copy and the full copy below.
-
Could you please give me actual example of what you mean by:
1. summary text
2. main copy
3. headingYou are correct, the style I gave you makes the following text’s style
The stats say that people look online on their phones or tablets as much as their desktops and the evidence is all around. Businesses would be foolish to not create a website that works on all formats.
same as the following heading style:
Multi-platform responsive sites • Content managed and brochure sites • Microsites • Mobile sites
—
Not only this, the WordPress cms seems to throw out my summary tags a lot.
I think this is more to do with browsers like Firefox not supporting display and summary tags yet. Is this happening in Chrome as well?
-
The main copy I’d like to be kept as Puritan for now.
To confirm that applies to ‘The stats say..’ copy.My main heading is in that instance: ‘All websites now need to be mobile.’ I’d like that styled as h3.
I have also introduced a subheading: ‘• Multi-platform responsive sites • Content managed and brochure sites • Microsites • Mobile sites’
What I would like is for the main heading and subheading to be present when the page loads. And the main copy to then only appear on clicking the arrow.
I would also like my subheading to be styled very small. I realise that this will be less good in seo terms but in such a competitive market I won’t be relying on seo too much anyway.
I’d also like to reduce the leading of my h3 style. How would I do that in the css?
Re: Firefox not supporting those tags – I’ve only edited my site in Firefox so not sure about if it does it in Chrome. Maybe I ought to change to that browser to do my editing..
-
What I would like is for the main heading and subheading to be present when the page loads. And the main copy to then only appear on clicking the arrow.
This is already happening.
_______________________________________________________________________I would also like my subheading to be styled very small.
This CSS does it:
.wf-active h4 { font-size: 20px; font-family: league-gothic-1,league-gothic-2,"Open Sans",sans-serif; color: red; }_______________________________________________________________________
I’d also like to reduce the leading of my h3 style.
.wf-active h3 { font-size: 30px; font-family: league-gothic-1,league-gothic-2,"Open Sans",sans-serif; color: green; }Note: In all the styles, change the attribute values as you wish.
-
Thanks for the help with the css, I’ve had a play with it.
And the yes, the headings are there on page upload – but the arrow is above the main heading each time! That’s my problem. I can’t make the arrow sit on the same line, preceding the main heading – without breaking the css styling…
-
Are you able to check this demo http://codepen.io/matt-west/pen/xtHdc and make the styles yourself?
-
Hi there, I wonder this css will helps you;
.entry-content summary h3 { display: inline-block; margin-bottom: 0; position: relative; top: 4px; }Heading has default display: block, so we need to make it inline.
-
This doesn’t really help! Its too far away from what I want and I’m not advanced enough in css coding to make it work for me.
I just need to get the arrow to precede summary text styled as h3 – instead of above it.
-
-
-
My code above should work. I add some extras css to align h4 too, here the complete code;
.entry-content summary h3 { display: inline-block; margin-bottom: 0; position: relative; top: 4px; } .entry-content summary h4{ padding-left: 20px; } -
Thank you. That worked well on my desktop – but on my mobile, if the summary heading wraps onto the next line – the arrow remains above… Any fixes other than shortening my summary titles?
I’ve also removed the indent on the h4 as it looks a bit odd in browsers where the code didn’t work.
-
Then lets try to make display: inline instead of display: inline-block.
.entry-content summary h3 { display: inline; margin-bottom: 0; position: relative; top: 4px; } -
-
Hi again,
This seems to have broken again. Arrows are above the headings.. I don’t think I have changed anything in the css for this to happen.. All a bit weird! Think WordPress has been running a bit slow just now – maybe its to do with WordPress than anything else?
Also, bit weird – my showcase images are at the bottom of the page you’ve helped me on. Any ideas?! https://palmerowen.wordpress.com/learn-about/
- The topic ‘Anyone know how to add a heading style to show/hide expandable text?’ is closed to new replies.
WordPress.com Forums 