Oavsett om du skriver ett långt, djupgående inlägg eller skapar ett detaljerat FAQ-avsnitt kan det vara svårt att presentera mycket information utan att överväldiga dina läsare. Ingen vill stirra ner i en massiv textvägg.
I det här fallet är vår lösning att visa och dölja text med en växlingseffekt. Det här sparar utrymme, gör innehållet mer lättläst och ger läsarna kontroll över vad de vill se.
Här är 3 enkla sätt att använda toggle-effekten i WordPress för att visa och dölja text för ditt långformade innehåll.
Varför visa och dölja text i WordPress Posts?
Många websites döljer text som standard, vanligtvis genom att visa en teaser och sedan inkludera en ”Läsa mer”- eller ”Se mer”-link. Besökare kan få mer information genom att clicka på den länken.
Detta är användbart om du behöver add to mycket information till en page men är orolig för att en massiv textvägg ska överväldiga besökarna.
Vanliga frågor är ett bra exempel, eftersom de flesta besökare bara vill ha svar på en enda fråga.
Om du visar alla svar i sin helhet kan besökarna få svårt att hitta den information de behöver.
Genom att dölja text med toggle-effekten kan visitorerna skanna massor av inlägg, funktioner, fördelar eller annan information och sedan välja det objekt de vill lära sig mer om.
Med detta sagt, låt oss se hur du kan visa och dölja text i WordPress med toggle-effekten. Använd bara snabblänkarna under för att hoppa till den metod du vill använda:
Metod 1: Visa och dölj text i WordPress med hjälp av shortcode (snabbt och enkelt)
Det snabbaste och enklaste sättet att add to en ”Läs mer”-länk till en page eller post är genom att använda Read More Without Refresh. Detta gratis plugin allow you to customize the ’Read More’ link and then add it anywhere on your website using a shortcode.
Det första du behöver göra är att installera och aktivera pluginet Läsa mer utan att uppdatera. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering, klicka på ”RMWP Settings” för att konfigurera plugin-inställningarna.
Till att börja med kan you ändra den text som används i ”Read More / Read Less” links genom att skriva i de två textfälten.
Om du till exempel skapar en sida med Vanliga frågor kanske du vill använda något som gillar ”Visa svar / Dölj svar” istället.
På den här sidan kan du också ändra textfärg, bakgrundsfärg och mycket mer. Detta kan hjälpa dig att skapa länkar som passar perfekt till ditt WordPress-tema.
You can also change the font weight, add a border, and change the padding.
När du är slutförd på denna page, se till att du klickar på knappen ”Save Changes” även om du inte har gjort några ändringar. Detta är viktigt eftersom om du inte klickar på den här knappen kommer pluginet inte att fungera som förväntat.
Med det gjort, kan du add en toggle effekt till någon page eller post. Du måste hitta den text du vill dölja och sedan omsluta den i shortcode.
Börja med att öppna Gutenbergs blockredigerare för en sida eller ett inlägg. Klicka sedan på ikonen ”+ Lägg till block” för att lägga till ett block före den text du vill dölja.
Börja sedan skriva ”Shortcode” och välj rätt block när det dyker upp.
I boxen Shortcode, add to följande shortcode: [läs mer]
När det är gjort måste du add to ett Shortcode block efter den text du vill dölja.
I slutet av texten klickar du bara på ikonen ”+” och skapar ett annat Shortcode block genom att följa samma process som beskrivs ovan.
I detta block, add to följande kod: [/läsa]
Du kan nu antingen clicka på ”Update” eller ”Publicera” för att göra texten levande.
Besök nu din WordPress blogg och du kommer att se att texten mellan blocken med shortcodes är dold som standard.
För att visa texten klickar du bara på länken ”Läsa mer” eller liknande.
Metod 2: Visa och dölj text i WordPress med SeedProd (bäst för vanliga frågor)
Vanliga frågor och svar är ett av de vanligaste formaten för att dölja och visa text på en WordPress-webbplats. Om du vill skapa ett professionellt avsnitt med frågor och svar med en snygg layout rekommenderar vi att du använder ett plugin för sidbyggare istället.
SeedProd är den bästa page buildern på marknaden och allow you att skapa all sorts custom landing pages för din WordPress website. Den levereras med mer än 300+ färdiga site templates, inklusive design som du kan använda för att främja dina produkter, tjänster, webinar och mycket mer.
All denna design är den perfekta platsen för att add to en section med Vanliga frågor.
När du har valt en template har SeedProd även olika färdiga Vanliga frågor sections som du kan add to din page design med ett enda click.
Många av dessa Vanliga frågor sections kommer med en built-in dölj/visa text toggle effekt.
De är också helt anpassningsbara, så att du enkelt kan lägga till din egen fråga och svarstext.
För information om hur du använder SeedProd, vänligen se vår guide om hur du skapar en customize page i WordPress.
När du har skapat en page är det enkelt att add to en färdig section med Vanliga frågor. I SeedProd Page Editor klickar du bara på tabben ”Sections” i den vänstra menyn.
Du kan nu select ’Vanliga frågor’ för att se alla SeedProds frågor och svar sections. För att previewa en design, hovera musen över den och click sedan på det lilla förstoringsglaset.
När du hittar en design som du vill använda klickar du på ”Choose This Section”.
SeedProd kommer sedan att gå vidare och lägga till sektionen längst ner på din page.
Du kan flytta avsnittet Vanliga frågor till en ny location med hjälp av drag and drop.
Efter det är du redo att add to din egen text genom att clicka för att välja Vanliga frågor accordion block. Den vänstra menyn kommer nu att update och visa en lista med all frågor.
För att editera en fråga och ett svarspar klickar du bara på frågan i menyn till vänster.
Detta öppnar två små textredigerare där du kan add to din egen fråga och ditt eget svar. Du kan också använda alla de vanliga alternativen för format, till exempel lägga till en länk eller göra texten fet.
Upprepa bara dessa steg för varje fråga och svar i Vanliga frågor section.
Om du vill lägga till fler frågor klickar du helt enkelt på knappen ”Add New Item”.
För att ta bort en fråga och ett svarspar, hoverar du bara musen över den frågan i menyn till vänster.
Klicka sedan på ikonen för papperskorgen när den dyker upp.
När du är nöjd med den information du har enter kan du ändra hur texten ser ut med hjälp av slidern ”Font Size” och ”Space Between”.
Det finns också en ”Icon” section som definierar den lilla bild som visas bredvid varje fråga i Vanliga frågor.
Om du vill customize den här bilden, clickar du bara för att förstora sectionen ”Icon”.
Här ser du inställningar för att ändra justeringen och färgen på iconen. Tänk bara på att ”Closed Icon” är den bild du ser som standard när frågan är minimerad.
”Open Icon” är den bild du ser när frågan förstoras.
Om du vill använda en helt annan icon istället, hoverar du musen över previewen ”Closed Icon” eller ”Open Icon”.
Klicka sedan på thumbnailen ”Icon Library”.
Detta öppnar SeedProds inbyggda bibliotek, där du kan välja mellan mer än 1400 Font Awesome-ikontypsnitt.
Du kan ytterligare anpassa hur FAQ-avsnitten ser ut genom att välja fliken ”Avancerat”. Här kan du ändra teckensnitt, lägga till marginal och avstånd och till och med lägga till CSS-animationer för att få FAQ:erna att sticka ut.
När det är gjort kan du fortsätta att lägga till nya block och customize innehållet på din SeedProd page.
När du är nöjd med hur det ser ut klickar du bara på pilen bredvid knappen ”Save” och väljer sedan ”Publicera”.
Nu, om du besöker din website, kommer du att se page design och Vanliga frågor section live.
Alternativ: Visa och dölj text i WordPress för Vanliga frågor med Heroic FAQs
Om du letar efter ett SeedProd-alternativ kan du också visa och dölja text med Heroic FAQs plugin.
Heroic FAQs är det bästa pluginet för hantering av Vanliga frågor för WordPress. Dess drag and drop-gränssnitt allow you att enkelt add frågor och svar till Vanliga frågor-grupper.
Sedan kan du visa dina Vanliga frågor var som helst på din website med hjälp av ett enkelt block i WordPress.
Pluginet erbjuder flera format för Vanliga frågor, och du kan visa och dölja dina frågor och svar med hjälp av ett dragspels- eller toggle-format.
För mer detaljer, se vår guide om hur du lägger till en sektion med vanliga frågor i WordPress och vår lista över de bästa tilläggen för vanliga frågor i WordPress.
Metod 3: Visa och dölj text med WordPress Details Block (inget plugin)
Om du inte vill använda ett plugin eller någon shortcode kan du använda det built-in Details-blocket i WordPress för att visa och dölja text. Denna funktion är också utmärkt för Vanliga frågor.
För att använda det här blocket öppnar du bara Gutenberg-redigeraren för en sida eller ett inlägg. Klicka sedan var som helst på gränssnittet på knappen ”+ Lägg till block” för att hitta Detaljer-blocket.
In the space next to the downward arrow sign, you can write down your frequently asked question.
Längst ner kan du skriva in svaret på den frågan.
I sidebaren för inställningar för Block kan du tacka ja till att svaret öppnas som standard om du vill.
När du är klar är det bara att gå vidare och förhandsgranska din webbplats. Klicka sedan på ”Uppdatera” eller ”Publicera”.
Om du vill använda samma Details-block med samma innehåll på andra sidor eller i andra inlägg kan du göra om det här blocket till ett återanvändbart block eller ett blockmönster. På så sätt behöver du inte börja om från början.
Du kanske också vill ändra blockets höjd och bredd för att få det att se bättre ut med resten av din sida.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar och döljer text i WordPress-inlägg med toggle-effekten. Du kanske också vill kolla in vår lista över de bästa Gutenberg-blockpluginsen för WordPress och vår guide om hur du skapar en hopfällbar sidofältsmeny i WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Alvin says
The Read More Without Refresh plugin uses display: none; for the hidden text. Won’t that be seen as hidden content and affect SEO negatively?
WPBeginner Support says
It should not as the content is set up to display on click. Using display:none would normally have a negative effect if you never plan to have that content visible and can be considered keyword stuffing.
Administratör
Nwosu Emmanuel says
Thank you for helping
WPBeginner Support says
Glad we could help!
Administratör
Karima says
Thanks! How can I apply it in new version of WordPress? in the old version you can switch between visual and text. In the new one where to write the code?
WPBeginner Support says
You can use the Classic block if you want a similar experience to the classic editor for this shortcode.
Administratör
Eseoghene Aya says
How can i make the show less appear on the bottom of the text?
WPBeginner Support says
For the display of the plugin, you would want to reach out to the plugin’s support for the currently available customizations.
Administratör
john ruark says
How can i make the show less appear on the bottom of the text?
WPBeginner Support says
You would want to reach out to the plugin’s support for if that is supported at the moment
Administratör
Dicado says
But can one do it without a plugin?
WPBeginner Support says
While possible to do this without a plugin, we do not have a beginner friendly method to do this without a plugin
Administratör
steinchen says
nice and simple plugin! this works for me to hide my Attachment sections (which is a long list of print-out with lots of paragraphs).
But I wonder if the notation text can be editable, e.g. not ”Hide Press release (123 Less Words)”, but to reflecting my hidden title?:
Show Attachment A1: …
Hide Attachment A1: …
WPBeginner Support says
You can change that by editing the more_text in the second shortcode example we show
Administratör
Anastasia says
Thank you very much! It’s working and thus, making my life easier! )
osita Solomon says
Thanks admin fr this wonderful post but i would like to know if it would be possible for me to embed a popunder link under the ”show more” toggle.
Thanks
Ranjan says
Is it possible to use this plugin on multiple paragraphs on a static page? I want to use it to show/hide information in single code. If so, what “type” would it be?
I have tried with one code but paragraph formatting is not possible,
when clicked on more we get the text in continuation
Thanks!
Annette says
How did you ”Add the short code like this?” Do you hover? Right click? Type it out? When I type in the short code, my pages literally show the words. Help please!!
Robert says
Is that plugin good to hide phone number on my website? I want to hide last four number on my site. And when people come and want to see my number they must click on number to show last four number.I wont do this because some people use my phone with some program and give another people. If someone know good plugin I will be very helpful for help.Thanks.
shaz says
thanks it still works in 2017
Faisal Maitho says
Thank you so much, i apply this plugin on my website its really very useful thanks again.
Dat says
hello i want the word show more and show less is in the center of my page. how can i do ?
Jessica says
Is there a way to hide one content when another is being viewed?
Virena says
I followed the instructions but seems like WordPress doesn’t allow the code to work on free themes.
Is there any other way how this can be made?
Ed says
Can I show/hide nested elements too with it ?
mike says
Doesn’t appear to be working in draft mode (need to iron things out before I publish page). Pasting shortcode in text editor and visual editor but when I preview I see shortcode and nothing’s hidden. Is this normal?
milan says
Hi.
I have some texts in columns that arnt same in length witch messes with grid. I need plugin that can hide second part of the text- the excess, and to show it in continuity with first part.
What do u recommend?
Sav says
I am also wondering how to replace the ”show more”, ”show less” text with a custom button image. How is this possible?
Federica says
Hello,
This is sounds like a great plugin.
I wonder if there’s any chance to use it to toggle the posts on a front page by clicking on their title?
If not, is there any plugin or code that allows that?
Thank you in advance.
Federica
David Kallander says
Trying to center the show/hide text but it’s left justified on the webpage. I’ve tried so many HTML tags, but to no avail.
Thanks,
Janie S. says
Hi there,
Thank you very much for sharing this quick video. It was indeed very easy to install. In your video the link are all aligned to the left. I tried to do it with the plugin instructions as written by the creator of the plugin but I can’t manage to make it work. It is always shows centered.
Can you please help me with this issue please?
Thank you so much!
Umar sajjad says
I want to use Show hide multiple time on a page.
lakshman says
sir I want to change the ”show more text” with text with” buttons” how to do it please explain or give the coding for it…………..
lakshman says
sir I want to change the ”text” with text with buttons how to do it please explain or give the coding for it…………..
Dana says
What if I want to see multiple Show/Hide features on a page. The toggle doesnt seem to work for that!
Paul says
Just add sequential numbering to your tags.
ie
[showhide type=”post1″ more_text=”Show more…” less_text=”Show less…”]
Text you want to hide
[/showhide]
[showhide type=”post2″ more_text=”Show more…” less_text=”Show less…”]
Text you want to hide
[/showhide]
etc
Umar sajjad says
Hi Paul,
i am using Type = ’post1’ , post2,post3 but its not working for mine.
Randy Utama says
Hello,
Is this plugin support responsive or mobile theme?
Thanks
Mohammad Qaiser says
Does toggling content has any effect on SEO. Is Google Bot able to analyze toggled content also.
WPBeginner Support says
Yes, Google bot is able to read the toggled and untoggled content.
Administratör
Bhanu says
Thanks but I didn’t understand it clearly. I want to know whether the toggle content is indexed by google or google ignores the toggled content?
WPBeginner Support says
yes it is indexed by Google.
Grant says
I want to hide or show all citations/references depending on the readers desires. I don’t want to create duplicate articles with and without the footnotes. Is there any way to toggle all content visibility at once from a single control?
Ibn Kassiem says
Hi
Thanks for the post.
I wanted to know is it possible to use this plugin to create an archive page that ONLY shows the post titles, when the user clicks on the toggle it shows the full post and can also close it again.
Or can you advise on a better way to do this please?
WPBeginner Support says
This plugin is not the best way to do that. What you need is to modify archives.php template in a child theme and then add the toggle effect before <?php the_content() ?> or <?php the_excerpt() ?> template tag.
Administratör
eleven-yu says
It is a good plugin.!
But I need a new feature that is I hide some content example dowloadlink, the link can display only after comment my post.
Could you help to import it?
thx.
Grace says
I like this, but do you know if this can or if it can be modified to toggle the comments area? I would love to be able to allow the user to hide and show the various comments rather then them all to be displayed.
Thanks in advance
WPBeginner Support says
Nope the plugin does not support that at the moment.
Administratör
ampatel says
Nice plugin, but is it possible to have multiple read more’s/read less?
Thanks
Mark Kolodziej says
I would like to know this as well.
WPBeginner Support says
Take a look at our jQuery FAQ Accordion tutorial. Ignore the FAQ’s part and you can implement the same jQuery on any text you want.
Administratör
Jumpringer says
I’d like to place multiple ”show/hides” on my page. Not clear how to implement the jQuery found on the jQuery FAQ Accordian link . I think you are saying that a WP FAQ section is not needed, is that correct?
When I uploaded the ”my-accordian” folder to the plugins directory, WP recognized the ”WPBeginner’s FAQ Accordion” plugin.
Can you provide some more detail to enable multiple ”show/hides” on pages not using the WP FAQ? Thanks so much.
Amanda Mays says
Is it possible to use this plugin on paragraphs on a static page? I want to use it to show/hide sections of my privacy policy. If so, what ”type” would it be?
Thanks!
Nico says
Super useful! You saved me from learning how to do it myself =) haha
Thanks!
Bella's Shelf says
Thank you for this site of wonderful info! I am brand new to hosted WP & every time I Google something Example: ”Install Google Analytic on WordPress” I ALWAYS pick your site for the answer. I didn’t realize I was doing it until tonight!
Thank you for helping us WP Noobs and Olds alike!
Clawrence says
Is it possible to add an image where the ’Show more…’ text is, so that the image can be clicked to show more/less text instead of a generic sentence?
Editorial Staff says
You can most likely customize the plugin to do that.
Administratör
Adam Kellett says
How is this done? I’ve tried this with no success:
[showhide type=”…” more_text=”” less_text=”” hidden=”yes”]
Is it complicated to make this customization?
fukr says
i want to say this is really useful..thanks