Customizing Paragraph Types

Tips and tricks to customize the paragraph types.

Tabs

Linking to a specific tab

To link to a specific tab, add the following JavaScript to your theme or a custom module.

jQuery(document).ready(function($) {

  // Javascript to enable link to tab.
  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  } 

  // Change hash for page-reload.
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
      window.location.hash = e.target.hash;
  });
});

You will then be able to link to the specific tab using http://example.com/#tab-123-1

Add additional Paragraph types into nested Paragraph fields

Some paragraphs have fields that allow nesting of other paragraphs (Columns, Carousel, Tabs, Accordion, Modal). If you would like to expand on the already allowed nested paragraph types, for example, allow contact forms to be added to columns, follow these steps:

1. Go to Structure > Paragraph Types > Columns > Manage fields or /admin/structure/paragraphs_type/bp_columns/fields
2. Click Edit for the Column Content field, and
3. Check the box next to the desired bundle
4. Repeat for the Column 2 and Column 3 bundles