Accordion Web Part headers

Steve Pine asked on April 6, 2018 19:22

I've added the Accordion Web Part and several panes successfully, but cannot find CSS style or any other way to have pane header become a "link" with cursor turning into 'pointer' when clicked. Anyone have a solution?

Screenshot attached with "Winter" as Pane #1 Header... Image Text

thanks Steve

accordion headers

Recent Answers

Peter Mogilnitski answered on April 6, 2018 21:00 (last edited on April 6, 2018 21:20)

You can look at the example on corporate site (/Examples/Web-parts/Layouts/Accordion-layout). Web part configuration looks like this. Pane header is not a link in term of HTML. You just imitate "link look" using CSS:

.LayoutAccHeader {
    color: #66addf;
    font-size: 14px;
    margin: 10px 0;
    text-decoration: underline;
    cursor: pointer;
}

0 votesVote for this answer Mark as a Correct answer

Steve Pine answered on April 6, 2018 21:54 (last edited on April 6, 2018 21:55)

Thanks...that's useful. While we're on the subject:

In the Accordion web part, the following do NOT seem to have any effect on the panes, when it displays at landing the first pane is expanded. I would prefer that no panes be expanded as default when first navigating to the page. (I tried using both below separately and together:

Active pane index: (set to 0)

Require opened pane: (NOT checked)

thanks again

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on April 7, 2018 01:06

Active pane index should be below 0:

Active pane index: -1
Require opened pane: Unchecked

0 votesVote for this answer Mark as a Correct answer