~jstys-z/helioviewer.org/timeline

<p>The markup of your accordion container needs pairs of headers and content panels, grouped by another element. By default, the header elements are anchors, assuming the following structure:</p>

<div>

<a href="#">First header</a>

<div>First content</div>

</div>

<div>

<a href="#">Second header</a>

<div>Second content</div>

</div>

</div></pre>

<p>If you use a different element for the header, specify the header-option with an appropiate selector, eg. header: 'h3'. The content element must be always next to its header.</p>

<p>If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.</p>

<p>Use activate(Number) to change the active content programmatically.</p>

<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/API/1.7.1/Accordion?section=1" title="Edit section: NOTE: If you want multiple sections open at once, don't use an accordion">edit</a>]</div><a name="NOTE:_If_you_want_multiple_sections_open_at_once.2C_don.27t_use_an_accordion"></a><h4>NOTE: If you want multiple sections open at once, don't use an accordion</h4>

<p>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:</p>

<pre>jQuery(document).ready(function(){

$('.accordion .head').click(function() {

$(this).next().toggle();

return false;

}).next().hide();

});</pre>

<p>Or animated:</p>

<pre>jQuery(document).ready(function(){

$('.accordion .head').click(function() {

$(this).next().toggle('slow');

return false;

}).next().hide();

});</pre>

</div>

<h3>Dependencies</h3>

<ul>

<li>UI Effects Core (Optional - only for non-default animations)</li>

</ul>

</div>

<h3>Example</h3>

<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

A simple jQuery UI Accordion.<br />

</p>

<pre>$("#accordion").accordion();

</pre>

</p>

<html>

<head>

$(document).ready(function(){

$("#accordion").accordion();

});

</script>

</head>

<h3><a href="#">Section 1</a></h3>

<div>

<p>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit

amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut

odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

</p>

</div>

<h3><a href="#">Section 2</a></h3>

<div>

<p>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor

velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In

suscipit faucibus urna.

</p>

</div>

<h3><a href="#">Section 3</a></h3>

<div>

<p>

100

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

101

Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero

102

ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis

103

lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

104

</p>

105

<ul>

106

107

108

<li>List item three</li>

109

</ul>

110

</div>

111

<h3><a href="#">Section 4</a></h3>

112

<div>

113

<p>

114

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

115

et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

116

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

117

mauris vel est.

118

</p>

119

<p>

120

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

121

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

122

inceptos himenaeos.

123

</p>

124

</div>

125

</div>

126

127

</body>

128

</html>

129

</pre>

130

131

</p><p></div>

132

</div>

133

</div>

134

135

<h2 class="top-header">Options</h2>

136

137

138

139

140

<h3 class="option-name"><a href="#option-active">active</a></h3>

141

<dl>

142

143

<dd class="option-type">Selector, Element, jQuery, Boolean, Number</dd>

144

145

<dt class="option-default-label">Default:</dt>

146

<dd class="option-default">first child</dd>

147

148

</dl>

149

</div>

150

151

<p>Selector for the active element. Set to false to display none at start. Needs «collapsible: true».</p>

152

</div>

153

154

<h4>Code examples</h4>

155

156

157

<dt>

158

Initialize a accordion with the <code>active</code> option specified.

159

</dt>

160

<dd>

161

<pre><code>$('.selector').accordion({ active: 2 });</code></pre>

162

</dd>

163

164

165

<dt>

166

Get or set the <code>active</code> option, after init.

167

</dt>

168

<dd>

169

<pre><code>//getter

170

var active = $('.selector').accordion('option', 'active');

171

//setter

172

$('.selector').accordion('option', 'active', 2);</code></pre>

173

</dd>

174

175

</dl>

176

</div>

177

</li>

178

179

180

181

182

<h3 class="option-name"><a href="#option-animated">animated</a></h3>

183

<dl>

184

185

<dd class="option-type">Boolean, String</dd>

186

187

<dt class="option-default-label">Default:</dt>

188

<dd class="option-default">false</dd>

189

190

</dl>

191

</div>

192

193

<p>Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and 'easeslide' are supported (both require the easing plugin).</p>

194

</div>

195

196

<h4>Code examples</h4>

197

198

199

<dt>

200

Initialize a accordion with the <code>animated</code> option specified.

201

</dt>

202

<dd>

203

<pre><code>$('.selector').accordion({ animated: 'easeslide' });</code></pre>

204

</dd>

205

206

207

<dt>

208

Get or set the <code>animated</code> option, after init.

209

</dt>

210

<dd>

211

<pre><code>//getter

212

var animated = $('.selector').accordion('option', 'animated');

213

//setter

214

$('.selector').accordion('option', 'animated', 'easeslide');</code></pre>

215

</dd>

216

217

</dl>

218

</div>

219

</li>

220

221

222

223

224

<h3 class="option-name"><a href="#option-autoHeight">autoHeight</a></h3>

225

<dl>

226

227

<dd class="option-type">Boolean</dd>

228

229

<dt class="option-default-label">Default:</dt>

230

231

232

</dl>

233

</div>

234

235

<p>If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.</p>

236

</div>

237

238

<h4>Code examples</h4>

239

240

241

<dt>

242

Initialize a accordion with the <code>autoHeight</code> option specified.

243

</dt>

244

<dd>

245

<pre><code>$('.selector').accordion({ autoHeight: false });</code></pre>

246

</dd>

247

248

249

<dt>

250

Get or set the <code>autoHeight</code> option, after init.

251

</dt>

252

<dd>

253

<pre><code>//getter

254

var autoHeight = $('.selector').accordion('option', 'autoHeight');

255

//setter

256

$('.selector').accordion('option', 'autoHeight', false);</code></pre>

257

</dd>

258

259

</dl>

260

</div>

261

</li>

262

263

264

265

266

<h3 class="option-name"><a href="#option-clearStyle">clearStyle</a></h3>

267

<dl>

268

269

<dd class="option-type">Boolean</dd>

270

271

<dt class="option-default-label">Default:</dt>

272

<dd class="option-default">false</dd>

273

274

</dl>

275

</div>

276

277

<p>If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.</p>

278

</div>

279

280

<h4>Code examples</h4>

281

282

283

<dt>

284

Initialize a accordion with the <code>clearStyle</code> option specified.

285

</dt>

286

<dd>

287

<pre><code>$('.selector').accordion({ clearStyle: true });</code></pre>

288

</dd>

289

290

291

<dt>

292

Get or set the <code>clearStyle</code> option, after init.

293

</dt>

294

<dd>

295

<pre><code>//getter

296

var clearStyle = $('.selector').accordion('option', 'clearStyle');

297

//setter

298

$('.selector').accordion('option', 'clearStyle', true);</code></pre>

299

</dd>

300

301

</dl>

302

</div>

303

</li>

304

305

306

307

308

<h3 class="option-name"><a href="#option-collapsible">collapsible</a></h3>

309

<dl>

310

311

<dd class="option-type">Boolean</dd>

312

313

<dt class="option-default-label">Default:</dt>

314

<dd class="option-default">false</dd>

315

316

</dl>

317

</div>

318

319

<p>Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).</p>

320

</div>

321

322

<h4>Code examples</h4>

323

324

325

<dt>

326

Initialize a accordion with the <code>collapsible</code> option specified.

327

</dt>

328

<dd>

329

<pre><code>$('.selector').accordion({ collapsible: true });</code></pre>

330

</dd>

331

332

333

<dt>

334

Get or set the <code>collapsible</code> option, after init.

335

</dt>

336

<dd>

337

<pre><code>//getter

338

var collapsible = $('.selector').accordion('option', 'collapsible');

339

//setter

340

$('.selector').accordion('option', 'collapsible', true);</code></pre>

341

</dd>

342

343

</dl>

344

</div>

345

</li>

346

347

348

349

350

<h3 class="option-name"><a href="#option-event">event</a></h3>

351

<dl>

352

353

<dd class="option-type">String</dd>

354

355

<dt class="option-default-label">Default:</dt>

356

<dd class="option-default">'click'</dd>

357

358

</dl>

359

</div>

360

361

<p>The event on which to trigger the accordion.</p>

362

</div>

363

364

<h4>Code examples</h4>

365

366

367

<dt>

368

Initialize a accordion with the <code>event</code> option specified.

369

</dt>

370

<dd>

371

<pre><code>$('.selector').accordion({ event: 'mouseover' });</code></pre>

372

</dd>

373

374

375

<dt>

376

Get or set the <code>event</code> option, after init.

377

</dt>

378

<dd>

379

<pre><code>//getter

380

var event = $('.selector').accordion('option', 'event');

381

//setter

382

$('.selector').accordion('option', 'event', 'mouseover');</code></pre>

383

</dd>

384

385

</dl>

386

</div>

387

</li>

388

389

390

391

392

<h3 class="option-name"><a href="#option-fillSpace">fillSpace</a></h3>

393

<dl>

394

395

<dd class="option-type">Boolean</dd>

396

397

<dt class="option-default-label">Default:</dt>

398

<dd class="option-default">false</dd>

399

400

</dl>

401

</div>

402

403

<p>If set, the accordion completely fills the height of the parent element. Overrides autoheight.</p>

404

</div>

405

406

<h4>Code examples</h4>

407

408

409

<dt>

410

Initialize a accordion with the <code>fillSpace</code> option specified.

411

</dt>

412

<dd>

413

<pre><code>$('.selector').accordion({ fillSpace: true });</code></pre>

414

</dd>

415

416

417

<dt>

418

Get or set the <code>fillSpace</code> option, after init.

419

</dt>

420

<dd>

421

<pre><code>//getter

422

var fillSpace = $('.selector').accordion('option', 'fillSpace');

423

//setter

424

$('.selector').accordion('option', 'fillSpace', true);</code></pre>

425

</dd>

426

427

</dl>

428

</div>

429

</li>

430

431

432

433

434

<h3 class="option-name"><a href="#option-header">header</a></h3>

435

<dl>

436

437

<dd class="option-type">Selector, jQuery</dd>

438

439

<dt class="option-default-label">Default:</dt>

440

<dd class="option-default">'> li > :first-child,> :not(li):even'</dd>

441

442

</dl>

443

</div>

444

445

<p>Selector for the header element.</p>

446

</div>

447

448

<h4>Code examples</h4>

449

450

451

<dt>

452

Initialize a accordion with the <code>header</code> option specified.

453

</dt>

454

<dd>

455

<pre><code>$('.selector').accordion({ header: 'h3' });</code></pre>

456

</dd>

457

458

459

<dt>

460

Get or set the <code>header</code> option, after init.

461

</dt>

462

<dd>

463

<pre><code>//getter

464

var header = $('.selector').accordion('option', 'header');

465

//setter

466

$('.selector').accordion('option', 'header', 'h3');</code></pre>

467

</dd>

468

469

</dl>

470

</div>

471

</li>

472

473

474

475

476

<h3 class="option-name"><a href="#option-icons">icons</a></h3>

477

<dl>

478

479

<dd class="option-type">Object</dd>

480

481

<dt class="option-default-label">Default:</dt>

482

<dd class="option-default">{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }</dd>

483

484

</dl>

485

</div>

486

487

<p>Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by <a href="http://www.themeroller.com" class="external text" title="http://www.themeroller.com">jQuery UI ThemeRoller</a></p>

488

</div>

489

490

<h4>Code examples</h4>

491

492

493

<dt>

494

Initialize a accordion with the <code>icons</code> option specified.

495

</dt>

496

<dd>

497

<pre><code>$('.selector').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });</code></pre>

498

</dd>

499

500

501

<dt>

502

Get or set the <code>icons</code> option, after init.

503

</dt>

504

<dd>

505

<pre><code>//getter

506

var icons = $('.selector').accordion('option', 'icons');

507

//setter

508

$('.selector').accordion('option', 'icons', { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' });</code></pre>

509

</dd>

510

511

</dl>

512

</div>

513

</li>

514

515

516

517

518

<h3 class="option-name"><a href="#option-navigation">navigation</a></h3>

519

<dl>

520

521

<dd class="option-type">Boolean</dd>

522

523

<dt class="option-default-label">Default:</dt>

524

<dd class="option-default">false</dd>

525

526

</dl>

527

</div>

528

529

<p>If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.</p>

530

</div>

531

532

<h4>Code examples</h4>

533

534

535

<dt>

536

Initialize a accordion with the <code>navigation</code> option specified.

537

</dt>

538

<dd>

539

<pre><code>$('.selector').accordion({ navigation: true });</code></pre>

540

</dd>

541

542

543

<dt>

544

Get or set the <code>navigation</code> option, after init.

545

</dt>

546

<dd>

547

<pre><code>//getter

548

var navigation = $('.selector').accordion('option', 'navigation');

549

//setter

550

$('.selector').accordion('option', 'navigation', true);</code></pre>

551

</dd>

552

553

</dl>

554

</div>

555

</li>

556

557

558

559

560

<h3 class="option-name"><a href="#option-navigationFilter">navigationFilter</a></h3>

561

<dl>

562

563

<dd class="option-type">Function</dd>

564

565

<dt class="option-default-label">Default:</dt>

566

567

568

</dl>

569

</div>

570

571

<p>Overwrite the default location.href-matching with your own matcher.</p>

572

</div>

573

574

<h4>Code examples</h4>

575

576

577

<dt>

578

Initialize a accordion with the <code>navigationFilter</code> option specified.

579

</dt>

580

<dd>

581

<pre><code>$('.selector').accordion({ navigationFilter: function(){ ... } });</code></pre>

582

</dd>

583

584

585

<dt>

586

Get or set the <code>navigationFilter</code> option, after init.

587

</dt>

588

<dd>

589

<pre><code>//getter

590

var navigationFilter = $('.selector').accordion('option', 'navigationFilter');

591

//setter

592

$('.selector').accordion('option', 'navigationFilter', function(){ ... });</code></pre>

593

</dd>

594

595

</dl>

596

</div>

597

</li>

598

599

</ul>

600

</div>

601

602

<h2 class="top-header">Events</h2>

603

604

605

606

607

<h3 class="event-name"><a href="#event-change">change</a></h3>

608

<dl>

609

610

<dd class="event-type">accordionchange</dd>

611

</dl>

612

</div>

613

614

<p>This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

615

</p>

616

<pre>$('.ui-accordion').bind('accordionchange', function(event, ui) {

617

ui.newHeader // jQuery object, activated header

618

ui.oldHeader // jQuery object, previous header

619

ui.newContent // jQuery object, activated content

620

ui.oldContent // jQuery object, previous content

621

});</pre></p>

622

</div>

623

624

<h4>Code examples</h4>

625

626

627

<dt>

628

Supply a callback function to handle the <code>change</code> event as an init option.

629

</dt>

630

<dd>

631

<pre><code>$('.selector').accordion({

632

change: function(event, ui) { ... }

633

});</code></pre>

634

</dd>

635

636

637

<dt>

638

Bind to the <code>change</code> event by type: <code>accordionchange</code>.

639

</dt>

640

<dd>

641

<pre><code>$('.selector').bind('accordionchange', function(event, ui) {

642

...

643

});</code></pre>

644

</dd>

645

646

</dl>

647

</div>

648

</li>

649

650

</ul>

651

</div>

652

653

<h2 class="top-header">Methods</h2>

654

655

656

657

658

<h3 class="method-name"><a href="#method-destroy">destroy</a></h3>

659

<dl>

660

<dt class="method-signature-label">Signature:</dt>

661

<dd class="method-signature">.accordion( 'destroy'

662

663

664

665

666

667

668

669

)</dd>

670

</dl>

671

</div>

672

673

<p>Remove the accordion functionality completely. This will return the element back to its pre-init state.</p>

674

</div>

675

</li>

676

677

<p>

678

679

680

<h3 class="method-name"><a href="#method-disable">disable</a></h3>

681

<dl>

682

<dt class="method-signature-label">Signature:</dt>

683

<dd class="method-signature">.accordion( 'disable'

684

685

686

687

688

689

690

691

)</dd>

692

</dl>

693

</div>

694

695

<p>Disable the accordion.</p>

696

</div>

697

</li>

698

699

700

701

702

<h3 class="method-name"><a href="#method-enable">enable</a></h3>

703

<dl>

704

<dt class="method-signature-label">Signature:</dt>

705

<dd class="method-signature">.accordion( 'enable'

706

707

708

709

710

711

712

713

)</dd>

714

</dl>

715

</div>

716

717

<p>Enable the accordion.</p>

718

</div>

719

</li>

720

721

722

723

724

<h3 class="method-name"><a href="#method-option">option</a></h3>

725

<dl>

726

<dt class="method-signature-label">Signature:</dt>

727

<dd class="method-signature">.accordion( 'option'

728

729

, optionName

730

731

, <span class="optional">[</span>value<span class="optional">] </span>

732

733

734

735

)</dd>

736

</dl>

737

</div>

738

739

<p>Get or set any accordion option. If no value is specified, will act as a getter.</p>

740

</div>

741

</li>

742

743

744

745

746

<h3 class="method-name"><a href="#method-activate">activate</a></h3>

747

<dl>

748

<dt class="method-signature-label">Signature:</dt>

749

<dd class="method-signature">.accordion( 'activate'

750

751

, index

752

753

754

755

756

757

)</dd>

758

</dl>

759

</div>

760

761

<p>Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass -1 to close all (only possible with collapsible:true).</p>

762

</div>

763

</li>

764

765

</ul>

766

</div>

767

768

<h2 class="top-header">Theming</h2>

769

<p>The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

770

</p>

771

<p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below.

772

</p>

773

774

<h3>Sample markup with jQuery UI CSS Framework classes</h3>

775

<div class="<strong>ui-accordion</strong> ui-widget ui-helper-reset"><br />

776

  <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-active ui-corner-top"><br />

777

778

    <a href="#">Section 1</a><br />

779

  </h3><br />

780

  <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom <strong>ui-accordion-content-active</strong>"><br />

781

    Section 1 content<br />

782

  </div><br />

783

  <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br />

784

785

    <a href="#">Section 2</a><br />

786

  </h3><br />

787

  <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br />

788

    Section 2 content<br />

789

  </div><br />

790

  <h3 class="<strong>ui-accordion-header</strong> ui-helper-reset ui-state-default ui-corner-all"><br />

791

792

    <a href="#">Section 3</a><br />

793

  </h3><br />

794

  <div class="<strong>ui-accordion-content</strong> ui-helper-reset ui-widget-content ui-corner-bottom"><br />

795

    Section 3 content<br />

796

  </div><br />

797

</div><br />

798

799

800

Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is <br /><div><br />

801

   <h3><a href="#">Section 1</a></h3><br />

802

803

      Section 1 content<br />

804

   </div><br />

805

   <h3><a href="#">Section 2</a></h3><br />

806

807

      Section 2 content<br />

808

   </div><br />

809

   <h3><a href="#">Section 3</a></h3><br />

810

811

      Section 3 content<br />

812

   </div><br />

813

</div>.

814

</strong>

815

</p>

816

817

</div>

818

</div>

819

820

</p><!--

821

Pre-expand include size: 29461 bytes

822

Post-expand include size: 52395 bytes

823

Template argument size: 31463 bytes

824

Maximum: 2097152 bytes

825

-->

826

827

Older »