pages/index.md - Issue 29548567: Issue 4925 - Create accordion component for Help Center

Keyboard Shortcuts

	File
u :	up to issue
m :	publish + mail comments
M :	edit review message
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line
<Enter> :	respond to / edit current comment
d :	mark current comment as done

	Issue
u :	up to list of issues
m :	publish + mail comments
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue
# :	close issue

	Comment/message editing
<Ctrl> + s or <Ctrl> + Enter :	save comment
<Esc> :	cancel edit

Delta Between Two Patch Sets: pages/index.md

Issue 29548567: Issue 4925 - Create accordion component for Help Center (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com

Left Patch Set: Add support for navigating between headings with arrow keys Created Sept. 19, 2017, 9:14 a.m.

Right Patch Set: Refactoring Created Sept. 28, 2017, 2:48 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 title=Hello, world	1 title=Hello, world

	2

	3 <div class="container">

2	4

3 # Hello, world	5 # Hello, world

4	6

5 Welcome to the Help Center!	7 Welcome to the Help Center!

6	8

7 <div class="container">	9 <br><br>

8	10

9 <dl class="accordion">	11 <dl class="accordion">

10 <dt role="heading" aria-level="3" class="accordion-heading">	12 <dt role="heading" aria-level="3" class="accordion-heading">

11 <button aria-expanded="true" aria-disabled="true" aria-controls="sect1" id=" heading1" class="accordion-toggle-button">	13 <button aria-expanded="true" aria-controls="sect1" id="heading1" class="acco rdion-toggle-button">

12 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">	14 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">

13 Section 1 Title	15 Section 1 Title

14 </button>	16 </button>

15 </dt>	17 </dt>

16 <dd role="region" aria-labelledby="heading1" id="sect1" class="accordion-body" >	18 <dd role="region" aria-labelledby="heading1" id="sect1" class="accordion-body" >

17 Section 1 Content	19 Section 1 Content

18 </dd>	20 </dd>

19	21

20 <dt role="heading" aria-level="3" class="accordion-heading">	22 <dt role="heading" aria-level="3" class="accordion-heading">

21 <button aria-expanded="true" aria-disabled="true" aria-controls="sect2" id=" heading2" class="accordion-toggle-button">	23 <button aria-expanded="true" aria-controls="sect2" id="heading2" class="acco rdion-toggle-button">

22 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">	24 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">

23 Section 2 Title	25 Section 2 Title

24 </button>	26 </button>

25 </dt>	27 </dt>

26 <dd role="region" aria-labelledby="heading2" id="sect2" class="accordion-body" >	28 <dd role="region" aria-labelledby="heading2" id="sect2" class="accordion-body" >

27 Section 2 Content	29 Section 2 Content

28 </dd>	30 </dd>

29	31

30 <dt role="heading" aria-level="3" class="accordion-heading">	32 <dt role="heading" aria-level="3" class="accordion-heading">

31 <button aria-expanded="true" aria-disabled="true" aria-controls="sect3" id=" heading3" class="accordion-toggle-button">	33 <button aria-expanded="true" aria-controls="sect3" id="heading3" class="acco rdion-toggle-button">

32 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">	34 <img src="/img/png/arrow-icon-secondary.png" srcset="/img/svg/arrow-icon-s econdary.svg 2x" alt="{{ "Toggle Section" \| translate("accordion-toggle-icon", " Image alt text") }}">

33 Section 3 Title	35 Section 3 Title

34 </button>	36 </button>

35 </dt>	37 </dt>

36 <dd role="region" aria-labelledby="heading3" id="sect3" class="accordion-body" >	38 <dd role="region" aria-labelledby="heading3" id="sect3" class="accordion-body" >

37 Section 3 Content	39 Section 3 Content

38 </dd>	40 </dd>

39 </dl>	41 </dl>

40	42

	43 <br><br>

	44

41 </div>	45 </div>

LEFT	RIGHT