Summary works in all newer web browsers, including Chrome 12, Firefox 48, Safari 6 and Opera 15. The list of supported web browsers is rapidly increasing. For older web browsers (like Internet Explorer) that do not support the HTML5 Summary tag, your content will be safely displayed in an expanded format, at all times. So there is never a danger of content going missing in older browsers!

This stack potentially has lots of uses. Summary certainly can be used an unlimited number of times in your normal page flow, or you can place Summary stacks within a theme sidebar or ExtraContent container. Summary is very easy to setup and use. Of course if you need a toggle effect with many more style or colour settings, our flagship Switcher or TogglePlus stacks are excellent upgrades.

Examples

Here are some examples of Summary stack in use, used to expand and collapse technical UK train data. Remember that you need to view this example in a modern web browser with support for HTML5 details and summary tags, to see the full effect.
Class 142 Pacer
The British Rail Class 142 is a class of Pacer diesel multiple-unit passenger trains used in England and Wales. 96 units were built by British Rail Engineering Limited's Derby Litchurch Lane Works between 1985 and 1987. Many Pacer units are to be withdrawn in late 2019, as they no longer comply with tighter safety and accessibility laws being introduced in 2020. It is envisaged most units will be scrapped, because they are too expensive and unsuitable to overhaul. New or cascaded stock has already been ordered to replace the Pacers. Some retired units may be sold to heritage railways or reserved for departmental use.

[Video]

The unit's body is based on that of the original Leyland National bus, and many fixtures and fittings of the bus (like seating, doors, windows and grab rails) can be found on the units. Each unit has a seating capacity of 121 passengers per two-car set.

Pacers were purposefully designed and built 'cheap' with a life expectancy of only about 10 years. Excessive wheel flange squeal on tight curves has been a problem on many routes operated by 142s, caused by the long wheelbase and lack of bogies. The rough ride which can result has led to the units being nicknamed Nodding Donkeys as this video demonstrates. They never proved to be a good design of train, but economic pressures had resulted in most being in service for nearly 35 years.

The class was upgraded in the early 1990s. All units now carry a more powerful Cummins engine – 230 bhp per car, which equals 460 bhp (340 kW) per twin-car unit – and Voith two-stage hydraulic transmission, starting with a torque converter which switches to fluid coupling drive once the unit is up to 45 miles per hour (72 km/h). This new drivetrain replaced the original Leyland bus engines and automatic transmissions, which lacked the power and reliability required for rail operations.

Source: Wikipedia Commons
Class 150 Sprinter
The British Rail Class 150 Sprinter is a class of diesel multiple-unit trains built by British Rail Engineering Limited's York Works between 1984 and 1987. The unit's body is based on BR's Mark 3 body design. Each unit has a seating capacity of 149 passengers per two-car set and a top speed of 75 mph. Each car has two pairs of wide metro-style sliding doors to make passenger loading quicker and easier, particularly with large items of luggage. This makes the trains well suited for stopping services on rural and semi-rural routes.

[Video]

A total of 137 units were produced, replacing many of the earlier, first-generation "Heritage" diesel multiple units. With the exception of one withdrawn unit involved in a serious accident in 1988, the remaining 136 units remain in daily operation on various routes across England and Wales.

Each car is powered by a Cummins NT855 285 hp engine – and Voith two-stage hydraulic transmission, starting with a torque converter which switches to fluid coupling drive once the unit is up to 45 mph (72 km/h). All units have undergone mechanical overhauls in recent years and modification to comply with disability standards (like new illuminated door controls). Most train operating companies have refreshed their examples with new seating, improved lighting, CCTV and passenger information displays.

Source: Wikipedia Commons
Class 156 Super Sprinter
The British Rail Class 156 Super Sprinter is a diesel multiple unit train. A total of 114 sets were built between 1987 and 1989 for British Rail by Metro-Cammell's Washwood Heath works. They were built to replace elderly first-generation DMUs and slower locomotive-hauled passenger trains. Most of the fleet operates in Scotland and Northern England. A small number are allocated to semi-rural lines in Eastern England.

[Video]

The bodyshell was made of steel, and the cab design was deliberately similar to the Class 150 to ease union acceptance. The vehicles are powered by 6-cylinder Cummins NT855-R5 diesel engines through Voith T211r hydraulic automatic transmissions and Gmeinder final drive units. They have a top speed of 75 mph (121 km/h).

Unlike the Class 150 units, the 156s have a single-leaf sliding door at either end of each coach. This reflected the expected longer journeys with fewer stops that the Class 156 was supposed to operate. As with the Class 150, all the doors are operable by passengers when released by the guard.

Source: Wikipedia Commons
Class 158 Express Sprinter
The British Rail Class 158 Express Sprinter is a diesel multiple-unit (or DMU), built specifically for British Rail between 1989 and 1992 by British Rail Engineering Limited (BREL) at its Derby Litchurch Lane Works. They were built to replace many locomotive-hauled passenger trains, and allowed cascading of existing Sprinter units to replace elderly 'heritage' DMUs. The lightweight aluminium body of the Class 158s leads to a good 'route availability' score, meaning that it is able to operate in parts of Britain where heavier units cannot. Class 158s have pairs of powered 'plug' style parting doors at each end of the cars.

[Video]

A total of 182 units were built. As built, interiors were described as fully carpeted, with "panoramic" windows and a variety of seats arranged both airline-style and in bays of four around tables. Unlike previous members of the Sprinter family, such as the Class 156 SuperSprinter, the Class 158s featured air conditioning, an on-board payphone, power-operated interior doors, a toilet in each carriage, and provision for a refreshment trolley service. Despite an increased top speed of 90 mph (145 km/h), the units also promised a smoother, quieter ride than its predecessors.

Every car is powered by either a Cummins NTA855R1 engine rated at 350 hp, a Perkins 2006-TWH engine rated at 350 hp or a more powerful Cummins NTA855R3 engine rated at 400 hp. All use a Voith T211r hydraulic automatic transmissions and Gmeinder final drive which switches to fluid coupling at 55 mph. The difference in the engine outputs is a result of some units originally being allocated to mountainous rural routes demanding more power for hill starts, and others being allocated to flatter semi-urban services where greater fuel economy was desired. However the allocation of units on various routes has become very mixed since privatisation of the railway network and the class being split between several different train operating companies.

The Class 158 proved to be a highly successful train design that continues to rival even modern-day stock. 20 units were even built and exported to Thailand State Railways in 1992 and continue to operate under their 'ASR' classification. The popularity of the class 158 amongst UK passengers and train operating companies mean that this train is likely to be in service for many more years to come. The maintenance-free aluminium body and simple mechanical workings are highly favoured. Some ideas have already been discussed to experiment converting some members of the class to bio-diesel power.

Source: Wikipedia Commons
The web browser automatically prepends the 'caret' triangle icon on each summary item and rotates it 90 degrees when the item is open. Some web browsers draw an outline border around items that are currently in an open state. These toggles are accessible to search engines and assistive devices like screen readers. This makes the Summary stack practical to use in various situations. In the examples above, we applied some extra padding and borders.

Setup

Once you have installed Summary into Stacks and RapidWeaver, follow these instructions:
  1. Open your Stacks library and search for 'Summary'. Drag and drop a copy of the stack into your page.
  2. With the Summary stack selected in edit mode, double-click to edit the 'Hello World' text and provide your own toggle heading.
  3. Within the area marked 'drop stacks here', drag and drop a simple Text, HTML, Markdown or Image stack. This drop zone is for the content you want hidden and revealed by the effect.
  4. Preview the page to test the stack. Export or publish your website when done.

If you want a Summary stack to start open, click the corresponding setting in the Stack options.

You can use as many summary stacks as you want on the same page. They can be placed inside a theme sidebar or ExtraContent container. It is also possible to nest Summary stacks inside of each other (over multiple levels) if the need arises. Summary will inherit your existing theme colouring and text styles.

The toggle heading can be highlighted using your mouse and have simple font formatting applied, like underlining, a different colour or can be set to a bold font weight. Spacing between Summary stacks can be accomplished using the generic border, padding and margin controls or using our free Spacer stack.

This document goes into some more depth about the Details and Summary HTML tags, including custom CSS code you can use for extra styling.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.