Collapsible panel titles link to nothing [#2729181]

Hi, the template for a collapsible panel titles looks like this:

 <a href="#" class="panel-title fieldset-legend" data-toggle="collapse" data-target="<?php print $target; ?>"><?php print $title; ?></a>

The href="#" causes really annoying behaviour with JS disabled/loading/broken, with the page jumping to the top of the screen on every click. The bootstrap markup examples look like this:

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>

Comment	File	Size	Author
#6	2729181-6.patch	1.74 KB	markhalliwell
#6
#2	collapsible_panel-2729181-2.patch	720 bytes	LewisNyman
#2

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

19 May 2016 at 11:28

LewisNyman created an issue. See original summary.

Comment #2

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 19 May 2016 at 11:29

File	Size
collapsible_panel-2729181-2.patch	720 bytes

The attached patch only links directly to the wrapper, as that is where the ID is coming from. It looks like we could move the id from the wrapper to the collapsible container to match the bootstrap examples but I don't know if that would cause side effects...

Comment #3

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 19 May 2016 at 11:32

Status:

Active

» Needs review

Comment #4

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 2 August 2016 at 21:28

Status:

Needs review

» Needs work

+++ b/templates/bootstrap/bootstrap-panel.tpl.php
@@ -12,7 +12,7 @@
+      <a href="#<?php print $id ?>" class="panel-title fieldset-legend" data-toggle="collapse" data-target="<?php print $target; ?>"><?php print $title; ?></a>

Can't seem to find the related issue for this, but the same type of fix in the 8.x-3.x branch. Essentially, the href should be using the $target variable and data-target should just be entirely removed. When that data attribute is provided, Bootstrap doesn't prevent the default behavior, which is why these JS lines were added and can likely be removed as well.

Comment #5

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 2 August 2016 at 21:41

Not the issue I was thinking of, but similar nonetheless.

Comment #6

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 18 January 2018 at 06:38

Status:

Needs work

» Fixed

File	Size
2729181-6.patch	1.74 KB

1 file was hidden/shown/deleted

File	Size
collapsible_panel-2729181-2.patch	720 bytes

Comment #7

18 January 2018 at 06:38

markcarver committed c06ce55 on 7.x-3.x

Issue #2729181 by markcarver, LewisNyman: Collapsible panel titles link...

Comment #8

glynster CreditAttribution: glynster commented 21 January 2018 at 00:18

Hi @markcarver we just had to revert back to bootstrap 7.x-3.16 as all collapse panels were open by default and caused any content inside to appear blank. Any vertical tabs say in the appearance theme were broken as well.

https://cl.ly/112s2l3T3g0W

Out of the patches this seems to be the one where js was updated.

Comment #9

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 21 January 2018 at 00:21

@glynster, you need to change your sub-theme's CSS, see #2634358-17: Multiple collapsible fieldsets have broken triggers in BS3.3.4.

I suppose I should create a change record for this.

Comment #10

markhalliwell

English

CreditAttribution: markhalliwell at Tag1 Consulting commented 21 January 2018 at 00:29

@glynster, change record is here: https://www.drupal.org/node/2938332

Comment #11

glynster CreditAttribution: glynster commented 21 January 2018 at 00:39

@markcarver and this is why you are a rockstar at what you do and for the community - super fast and you know exactly where to go! Resolved. Tnx a million!