Table Of Content Block – Auto-Generate Clickable Table of Contents vs Accordion Blocks

Enhance your long-form content with the Table of Contents Block! 📚 This powerful WordPress plugin automatically generates a smart, interactive table of contents, making your content easy to navigate. It helps guide your readers effortlessly to the sections they’re interested in.Ideal for content creators, bloggers, and website owners, this tool transforms any lengthy article into a well-organized, user-friendly masterpiece. Tired of losing readers in lengthy articles? Our Table of Contents Block is your solution! It automatically scans your content, identifies all headings, and creates a beautiful, clickable navigation menu that helps readers instantly jump to the sections they’re most interested in. 📌 Ideal For ✔ Blog Posts – Keep readers scrolling longer. ✔ Documentation & FAQs – Make help articles easier to navigate. ✔ Tutorials & Guides – Improve readability for step-by-step content. ✔ Knowledge Bases & Wikis – Organize long-form content like a pro. ✔ Affiliate & Review Sites – Help users find key sections faster. What makes this plugin special? It’s not just a table of contents – it’s a complete content navigation system that: • Works automatically – just add the block and watch the magic happen • Stays synchronized with your content – updates in real-time as you edit • Looks beautiful on all devices – fully responsive design • Enhances reader engagement – keeps visitors on your page longer • Improves SEO performance – helps search engines understand your content structure better Whether you’re a blogger, content creator, or business owner, this plugin helps make your content more professional, accessible, and user-friendly. Give your readers the premium content experience they deserve! Why choose Table of Contents Block? Readers often get lost in lengthy content. This plugin helps guide them exactly where they want to go—improving navigation, boosting time-on-page, and enhancing the overall experience. Table Of Content Block Features Automatic Generation: The block automatically generates a TOC based on the headings in your post or page. Customizable Styles: You can customize the appearance of TOC, including font, size, and colors. Smooth Scrolling: Clicking on a table of contents entry smoothly scrolls the page to the corresponding heading. Anchor Links: TOC entries are linked to the corresponding headings using anchor links. Gutenberg Integration: The block seamlessly integrates with the Gutenberg editor, making it easy to add a table of contents to your content. Responsive Design: TOC is designed to be responsive and adapt to different screen sizes. Benefits: Improved Navigation: Provides an easy way for visitors to navigate long-form content. Enhanced User Experience: Makes it easier for visitors to find the information they are looking for. SEO Optimization: Helps search engines understand the structure of your content, which can improve your SEO rankings. How to use Table Of Content Block First, install the Table Of Content Block plugin from the WordPress dashboard. Add the Table Of Content Block from the block category called “widgets” in the Gutenberg editor. You can change block settings from the right-side settings sidebar. Enjoy! For installation help click on Installation Tab – Did you like this plugin? Dislike it? Have a feature request? Please share your feedback with us ⭐ Check out the Parent Plugin of this plugin- 🔥 B Blocks – Best gutenberg blocks collections for WordPress. ⭐ Check out our other WordPress Plugins- 🔥 Html5 Audio Player – Best audio player plugin for WordPress. 🔥 Html5 Video Player – Best video player plugin for WordPress. 🔥 PDF Poster – A fully-featured PDF Viewer Plugin for WordPress. 🔥 Document Embedder – Best WordPress Document Embedder Plugin. 🔥 3D Viewer – Display interactive 3D models on the webs. 🔥 Advanced Post Block – Best Post Display Plugin for WordPress. External Service Integration Service Name: package.js Docs link: package docs link Developer Notes Assets file name assets file destination. ex: public/js/*.min.js Public source code GitHub link for review, study, and contribute. For more information on how to contribute to this plugin, please visit our GitHub repository.

Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features Adds a Gutenberg block for adding accordions to your site. Supports multiple accordions with individual settings for each accordion item. Fully responsive. Support for item IDs and direct links. Supports nesting accordions. Accessible (for users requiring tabbed keyboard navigation control). Optional Features Open individual accordion items by default. Disable auto closing of accordion items. Manually close items by clicking the title again. Scroll page to title when it’s clicked open (including setting a scroll offset position). Set the HTML heading tag for the title element (h1–h6, button). Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults. Supports adding custom block styles using wp.blocks.registerBlockStyle. Output The plugin will ultimately output following HTML (simplified for this example): Title with H2 tag Content Custom CSS You can use the following CSS classes to customize the look of the accordion. .c-accordion__item {} /* The accordion item container */ .c-accordion__item.is-open {} /* is-open is added to open accordion items */ .c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */ .c-accordion__title {} /* An accordion item title */ .c-accordion__title--button {} /* An accordion item title that is using a ` ` tag */ .c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */ .c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */ .c-accordion__content {} /* An accordion item content container */