Adding Tabbed Content in Post / Page
-
Hi wordpress experts,
id like to know is there any way to add tabbed content in post / page without using plugins? since my WP plan is premium. if its possible to use custom css, would you please help with the code?
thank you for your kind support
The blog I need help with is: (visible only to logged in users)
-
Hi there,
What type of content exactly do you want to add? The type of content, and how much of it, can have an impact on what method is most practical. But shortly, CSS is what you need, yes – HTML does not support a Tab character the way word processors do. But the best type of CSS to use depends on the type of content.
-
Hi Kokkiesh,,
thank you for your reply,
im not sure what do you mean by type of content,, but my point is, i want to create tab to arrange content of page so that it won’t be too long page,, this is for example :
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulatorsbut the problem is, i can’t add java script directly to the html page editor,, is there any work arround? thank you for your kind support
-
Okay, that’s not at all what I understood by tabbed content. I understood it as spacing content into columns, like you would do by pressing the Tab key in a word processor or with a table.
Using tabs to display different content like illustrated there is not possible using CSS only – it depends on that section of script code to run. And scripts can only be added to WordPress.com sites on the Business Plan.
The best workaround I can offer is to use the summary and details HTML tags instead. Instead of tabs along the top that reveal the information when clicked, this would result in a vertical list of headings which expand to show the info under each heading when clicked:
-
-
-
hi,
You can also simulate CSS tabulation with menus:
In this example, I created 2 ways to link to the cities posts:
1. included the city posts in my Primary Menu
and
2. created a new Cities menu, added it to the navigation menu widget on the sidebarhttps://screenshots.firefox.com/gkMD98DiwTclakQf/wp20180808.com
Let us know if you have more questions.
-
While it is possible to add tabs via pure CSS, it’s in no way standard, and I’d be worried about accessibility issues depending on the method used. Regardless, this CSS-Tricks article makes for an interesting read.
-
Hi travelumrohab,
I think @kokkieh’s suggestion of using HTML tags is closest to what you have described. The option @kosiew mentioned involves adding links to your site menu but it sounds like you wish to add tabs within your content instead.
Custom CSS could then be used to style the HTML tags. For example, adding a background colour behind the text.
-
The
<summary>and<detail>elements don’t appear to be supported by IE11 & Edge browsers: https://caniuse.com/#feat=details
- The topic ‘Adding Tabbed Content in Post / Page’ is closed to new replies.
WordPress.com Forums 