chore(example): stay consistent in id= in examples

whe use hyphens like other widgets were using

Author: vvo

README.md

@@ -326,13 +326,13 @@ Note that we are not toggling from `true` to `false` here, but from `true` to
 `undefined`.
 
 ```html
-<div id="free_shipping"></div>
+<div id="free-shipping"></div>
 ```
 
 ```javascript
 search.addWidget(
   instantsearch.widgets.toggle({
-    container: '#free_shipping',
+    container: '#free-shipping',
     facetName: 'free_shipping',
     label: 'Free Shipping',
     template: '<label><input type="checkbox" {{#isRefined}}checked{{/isRefined}} />{{label}}</label>'

example/app.js

@@ -65,7 +65,7 @@ search.addWidget(
 
 search.addWidget(
   instantsearch.widgets.refinementList({
-    container: '#price_range',
+    container: '#price-range',
     facetName: 'price_range',
     operator: 'and',
     limit: 10,
@@ -76,10 +76,10 @@ search.addWidget(
 
 search.addWidget(
   instantsearch.widgets.toggle({
-    container: '#free_shipping',
+    container: '#free-shipping',
     facetName: 'free_shipping',
     label: 'Free Shipping',
-    template: require('./templates/free_shipping.html')
+    template: require('./templates/free-shipping.html')
   })
 );
 

example/index.html

@@ -38,7 +38,7 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
           <div class="panel-heading">Shipping</div>
           <div class="panel-body">
             <ul class="nav nav-stacked">
-              <li><div id="free_shipping"></div></li>
+              <li><div id="free-shipping"></div></li>
             </ul>
           </div>
         </div>