chore(docs): fix collapse accordion example to not use href="#" on buttons (closes bootstrap-vue#5352) (bootstrap-vue#5353)

tmorehouse · jacobmllr95 · web-flow · commit 41680ba0067b · 2020-05-12T08:13:39.000+02:00
* chore(docs): fix collapse accordion example to not use `href="#"` on buttons

* Update README.md

* Update README.md

* Update README.md

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md
@@ -146,7 +146,7 @@ at a time.
   <div role="tablist">
     <b-card no-body class="mb-1">
       <b-card-header header-tag="header" class="p-1" role="tab">
-        <b-button block href="#" v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
+        <b-button block v-b-toggle.accordion-1 variant="info">Accordion 1</b-button>
       </b-card-header>
       <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
         <b-card-body>
@@ -158,7 +158,7 @@ at a time.
 
     <b-card no-body class="mb-1">
       <b-card-header header-tag="header" class="p-1" role="tab">
-        <b-button block href="#" v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
+        <b-button block v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
       </b-card-header>
       <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
         <b-card-body>
@@ -169,7 +169,7 @@ at a time.
 
     <b-card no-body class="mb-1">
       <b-card-header header-tag="header" class="p-1" role="tab">
-        <b-button block href="#" v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
+        <b-button block v-b-toggle.accordion-3 variant="info">Accordion 3</b-button>
       </b-card-header>
       <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
         <b-card-body>
diff --git a/src/directives/toggle/README.md b/src/directives/toggle/README.md
@@ -90,6 +90,19 @@ trigger element when the target component is closed, and removed when open. As o
 }
 ```
 
+## Preventing the target from opening or closing
+
+To prevent the trigger element from toggling the target, set the `disabled` prop on `<button>`,
+`<b-button>`, or `<b-link>` and the toggle event will _not_ dispatched to the target(s).
+
+`v-b-toggle` also checks if the `click` event (and `keydown` event for non-button/links) was
+canceled (i.e. via `event.preventDefault()` or `@click.prevent`), and if so, it will _not_ dispatch
+the toggle event to the target(s).
+
+Because of this, avoid placing `v-b-toggle` on a `<b-button>` or `<b-link>` that has the `href` prop
+set to `'#'`, as these components (or components based on them) call `event.preventDefault()` to
+stop the browser from scrolling to the top of the page.
+
 ## Accessibility
 
 The directive, for accessibility reasons, should be placed on an clickable interactive element such
