Some sort of 'read more' button in my posts (but not the usual)
-
Hi there,
I’ve got a idea and I’d like to know if I can make it work!
Can you take a look at this site/post: https://decorrespondent.nl/1304/waarom-een-uitdijende-overheid-geen-ziekte-maar-een-zegen-is/99315388832-70499921Just after the photo, first part of the post, you can see a small triangle. If you click it, a piece of text appears.
I love that! Is there any way I can do this in my posts using CSS?
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi @karinkoolen,
I hope you are well today.
You can achieve the similar functionality using following CSS and HTML code.
HTML Code:
<label for="toggle-1">Click</label> <input type="checkbox" id="toggle-1"> <div>Add description here.</div>CSS Code:
input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } label { -webkit-appearance: push-button; -moz-appearance: button; display: inline-block; margin: 60px 0 10px 0; cursor: pointer; } /* Default State */ div { display:none; background: green; width: 400px; height: 100px; line-height: 100px; color: white; text-align: center; } /* Toggled State */ input[type=checkbox]:checked ~ div { display:block; }To style it similarly we have to develop some more CSS code.
Best Regards,
Vinod Dalvi -
Thank you so much, Vinod! I hope you’re having a good day as well!
It’s bedtime here, but tomorrow I’m going to find out how the code works! ;-)
Do I use both the codes? Can you tell me where I need to past the html code? And what do I have to write in the post itself?Thank you!
Best regards,
Karin -
Hi Karin,
Thank you for your reply.
Use the provided HTML code in the post / page text editor where you want it to display and add the CSS code in the CSS editor .
To add Custom CSS you’ll need the Custom Design upgrade, which you can purchase in your dashboard under Store.
Cheers,
Vinod Dalvi -
Hi Vinod,
I’m using the Custom Design upgrade, so I’ve put the CSS in my CSS editor.
I’m sorry, but I guess I need some more help here. I hope you don’t mind!
I cant’t figure out how to use the html. I’ve tried to put the html you wrote for me in my text editor, like this:
<label for=”toggle-1″>Click</label>
<input type=”checkbox” id=”toggle-1″><div>Here I’ve written the text I want to hide behind the button – the text only appears when the button is clicked</div>But only a written ‘click’ appears. How exactly can I put some text behind the button?
Thank you!
-
Hi Vinod,
I’m using the Custom Design upgrade, so I’ve put the CSS in my CSS editor.
I’m sorry, but I guess I need some more help here. I hope you don’t mind!
I cant’t figure out how to use the html. I’ve tried to put the html you wrote for me in my text editor, like this:
<label for=”toggle-1″>Click</label>
<input type=”checkbox” id=”toggle-1″><div>Here I’ve written the text I want to hide behind the button – the text only appears when the button is clicked</div>But only a written ‘click’ appears. How exactly can I put some text behind the button?
Thank you!
-
-
Hi Karin,
But only a written ‘click’ appears. How exactly can I put some text behind the button?
Yes by default it will display only click button hiding the small content and clicking on the button it will display the text contained in between the <div> … </div> tags, in your case it will display the text “Here I’ve written the text I want to hide behind the button – the text only appears when the button is clicked”.
All other content that you want to display on the page should be added outside the provided HTML code.
If you have any problem then please share me the page / post link where you have used the provided code.
Cheers,
Vinod Dalvi -
I have used an old post to test the code: http://karinkoolen.com/2014/03/20/gewoon-in-madrid-zijn/
If you scroll all the way down, you’ll find the code. But I see that once I’ve saved the changes, only the <div>..</div> is there; the rest of the code is gone..
I’ve typed this code:
This is a <label for=”toggle-1″>test</label>
<input type=”checkbox” id=”toggle-1″>
<div>a means of testing: as a procedure, reaction, or reagent used etc etc</div> to see how the code works! ;-)Cheers!
-
-
Hi, the label and input HTML tags are not allowed here at WordPress.com at this time. I’ll think on things and see if I can come up with a reliable way to simulate what is on that site for you.
-
Thanks Richard (that’s your name right? I’ve checked you website!)
No rush at all, but it would be a great improve of my blog ;-)greetz
Karin -
-
Hi @karinkoolen,
Could you please try using the following CSS code as the label and input HTML tags are not allowed here at WordPress.com at this?
HTML Code:
<a href="#toggle-1" class="click-button">Show</a><a href="#" class="click-button">Hide</a> <div id="toggle-1">Here I've written the text I want to hide behind the button - the text only appears when the button is clicked</div>CSS Code:
a.click-button { -webkit-appearance: push-button; -moz-appearance: button; display: inline-block; margin: 60px 0 10px 0; padding: 0 5px; cursor: pointer; text-decoration: none; } /* Default State */ div#toggle-1 { display:none; width: 80%; height: auto; line-height: auto; color: #000; text-align: center; margin:0 auto; } /* Toggled State */ div#toggle-1:target{ display:block; }You will see this solution in action on this page.
Best Regards,
Vinod Dalvi
- The topic ‘Some sort of 'read more' button in my posts (but not the usual)’ is closed to new replies.
WordPress.com Forums 