{"id":248,"date":"2014-02-25T14:26:07","date_gmt":"2014-02-25T14:26:07","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=248"},"modified":"2016-11-14T09:35:34","modified_gmt":"2016-11-14T09:35:34","slug":"expandable-and-tabbed-content","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/02\/25\/expandable-and-tabbed-content\/","title":{"rendered":"Expandable and Tabbed Content"},"content":{"rendered":"

There are two main ways of shortening a very long page:<\/p>\n

Firstly<\/strong>, you can make the content Expandable<\/strong><\/a>, as seen on our Entrance Requirements<\/a> pages. This is useful when you have long lists of items on a page, but the page visitor is only likely to be interested in the one item that applies to their circumstances.<\/p>\n

\"expandable-content-fw\"<\/a><\/p>\n

Secondly<\/strong>, you can make the content Tabbed<\/strong><\/a>, which is also used in the course pages. Tabbed content is useful when you have lots of pages with similar categories (all courses have Modules, Careers, Finance information, for example).<\/p>\n

\"tabbed-content-fw\"<\/a><\/p>\n

Both methods are implemented in exactly the same way.<\/p>\n

Each Tab or Expandable needs to be its own piece of content within the same section. You’ll have to go to Add Content -> All Purpose Content for each one. Here’s how the content looks for the Tabbed page in the Sample Content site:<\/p>\n

\"\"<\/a><\/p>\n

In this example, the first piece of content has no special requirements, but the bottom three are tabbed. They become tabbed simply by giving them the class ‘tabbed<\/strong>‘ all in lower case – here’s a screenshot of the second tab from the Modify Content screen:<\/p>\n

\"\"<\/a><\/p>\n

The class field<\/strong> is at the bottom – remember to use only lower case. Also note that this piece of content has some embedded video from Vimeo – this is documented in another post<\/a>.<\/p>\n

The Content List for the expandable section looks more or less identical:<\/p>\n

\"\"<\/a><\/p>\n

The only significant difference is that the class field contains the word ‘expandable’ in lowercase:<\/p>\n

\"\"<\/a><\/p>\n

Remember to Save and Approve, and you’re done. The two types are fairly interchangeable. If you want to switch between one or the other, just change the class field, or to make it back into regular content, remove it entirely.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

There are two main ways of shortening a very long page: Firstly, you can make the content Expandable, as seen on our Entrance Requirements pages. This is useful when you have long lists of items on a page, but the … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":839,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,19],"tags":[],"class_list":["post-248","post","type-post","status-publish","format-standard","hentry","category-content-templates","category-the-class-field"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/users\/839"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":8,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/posts\/248\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/t4\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}