How-to Add A Collapsible Text Area In WordPress
Articles Blog

How-to Add A Collapsible Text Area In WordPress

August 27, 2019


Wp crafter.com episode 009 how to add a collapsible
text area in this episode am an attempt to do something
that I don’t normally do in that is implement a solution live on my website without me having
gone through it before recording so I look like I know what I’m doing so I am cleaning
up some things that I don’t like about my website and what I do with these videos I
take the audio and then I run him through a program called Dragon naturally speaking
that will actually transcribed for me so I don’t have to do it now it’s not perfect but
it’s about 99% accurate in the what I like to do is added as content into my posts so
I put below is the raw on edited transcript and then I have all of this text now I don’t
really think many people can read this I I really haven’t there more for Google so it
can see more content on my blog posts however it yet just go so far down to get to where
you would want to leave a comment I want to collapse it and so I know that some off-the-shelf
themes will have a feature built in her you can expand and collapse the text area but
I don’t have that surrogate little searching and I came up with this plug-in right here
called collapse O-Matic normally I prefer to just add some code to accomplish what I
want however in this case this plug-in looks pretty solid collapse O-Matic and just for
the latest version which was only put out a couple months ago which means it’s actively
being developed and it works there’s a lot of positive reviews I feel pretty comfortable
installing this on my blog so many do this in real time so let’s highlight and copy the
name into the clipboard and here is the actual post on my blog pulled up let’s go here and
do a search so many go to plug-ins add new minute pace that mean right there click on
search plug-ins and here it is of course so let’s click install now okay it’s downloaded
let’s just activate the plug-in now let me while it’s activating let me go back over
here so right here is the instructions I pretty much need to just take this little short code
put it in my post and let’s even work someone a copy that into my clipboard okay so it is
configured going to the settings just in case to see if there’s any particular settings
see here there is an animation effect option I can add some custom CSS which of the later
time and okay so let’s get all the level up they have a premium version I don’t think
I’ll need that are so medical back here to my WordPress post and here it is worth says
below is the raw unedited transcripts so let’s see him in a go into here minute paste and
then let me copy this and put it here Mike that let me copy this and then delete it Melanie
scroll all the way to the bottom and added right there so let’s see okay below let’s
see inside a private want the text to change instead of below is the raw unedited text
I would probably wanted to say click here click here for the clicker for the raw unedited
transcripts of it, click on update and let’s see if it worked only to come back in and
and remove this line if it did work I write such given a moments okay and I am going to
refresh and let’s scroll down there is click here for the raw on edited transcript let’s
you have than a click and there it is the transcript of a perfect so let’s do a little
bit of quick cleanup what’s interesting why it’s just here might have to go in to code
view right here let’s see are right so let me get rid of this C Oaks I think I need to
remove that actually that and this okay that actually looks more like how it’s supposed
to all case in LME click on update okay let’s do refresh on the front end other it is that’s
actually perfect for me it’s all in this darker color there and there is the transcripts so
now this is actually pretty awesome’s and I can go through NEC when you click through
to my post it’s can be shorter to get to where the common area is yet the info is still there
for Google so anyways if you want to have this feature added to your website it was
so the plug-in which is called collapse O-Matic and the way you use it is you put this bit
of text here you put your title and then that there and at the closing tag you put the/expand
and you have collapsed the text there is probably lots other uses for questions and answers
and things like that on the site but so far I’m liking it so anyways if you have a question
about any particular plug-in or anything about WordPress for free to contact me.

Only registered users can comment.

  1. Thank you!! I have been trying this a million different ways and couldn't get it to work with multiple paragraphs or links. But when I got to see your code, all I had to do was take off that span code that was applying a color to my title and it worked!!!

  2. Great video, when I edit my blog on wordpress.com, the screen does not allow me to search for new plugins… It only shows the existing stock plugins. I am using the website interface, on the free plan… Do I need the "Custom Design" Feature in order to do this?? Thanks.

  3. Hi there. Thanks for the great video.

    How can we customize the button itself? I'd like to add a custom picture instead of the stock arrow.

    Any simple solution for newbs?

  4. Thanks so much, I spent hours following other sites instructions to no avail and then I used yours and I truly am a newbie and it worked. I have a question though. I have tried to put to collapsing bits onto my page by using your code twice, it does not work the drop down arrows operate both sections, any advise?

  5. Mine isn't working:( could there be new settings to select perhaps? Is there a better collapse plug in to use now?

  6. Thanks! Is there a way to make the "read more" button to be remain at the bottom once the text expands, along the end of the text box? I'm trying to do an "about us" that collapses.

  7. Hello. I see that it seems you stopped using this method in your website, can you share why? SEO issues? Now I even see that in your blog where this video text is, you are not using it and you are using scroll text instead. Why?

  8. Thanks! Is there a way to make the "read more" button to be remain at the bottom once the text expands, along the end of the text box?
    Please let me know if you have any solution for this.

  9. Does anybody know if you can change the code to enable showing the text just from rolling over the title (rather than actually clicking it)? If so, please help!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *