diff --git a/components/accordion.pug b/components/accordion.pug
index c778537..b8277ea 100644
--- a/components/accordion.pug
+++ b/components/accordion.pug
@@ -5,7 +5,7 @@ mixin accordion(id)
 
 //- accordion-item
 mixin accordion-item(type,title,parent,expanded)
-	-var id = title.replace(/\s+/g,"")
+	-var id = title.replace(/[^a-zA-Z0-9]/g,'_')
 	.panel(class="panel-"+type)
 		.panel-heading(role="tab", id="heading"+title)
 			h4.panel-title
diff --git a/test/accordion.js b/test/accordion.js
index dab259b..66a4f85 100644
--- a/test/accordion.js
+++ b/test/accordion.js
@@ -10,7 +10,7 @@ describe("Accordion",function() {
     +accordion-item(type,title,parent,expanded)`;
     fs.writeFileSync(path.join(__dirname,"fixtures/accordion","accordion.pug"),accordionTemplate);
     var fn = pug.compileFile(path.join(__dirname,"fixtures/accordion","accordion.pug"));
-    var actual = '<div class="panel-group" id="accordionmyaccordion" role="tablist" aria-multiselectable="true"><div class="panel panel-primary"><div role="tab" id="headingMy Accordion Item" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMyAccordionItem" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div class="panel-collapse collapse" id="collapseMyAccordionItem" role="tabpanel" aria-labelledby="headingMy Accordion Item"><div class="panel-body"></div></div></div></div>';
+    var actual = '<div class="panel-group" id="accordionmyaccordion" role="tablist" aria-multiselectable="true"><div class="panel panel-primary"><div role="tab" id="headingMy Accordion Item" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMy_Accordion_Item" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div class="panel-collapse collapse" id="collapseMyAccordionItem" role="tabpanel" aria-labelledby="headingMy Accordion Item"><div class="panel-body"></div></div></div></div>';
     var locals = { id: "myaccordion",title:"My Accordion Item",type: "primary", parent: "myaccordion",expanded:false};
     it("should generate an accordion",function() {
         assert.equal(actual,fn(locals));
@@ -20,7 +20,7 @@ describe("Accordion",function() {
 +accordion-item-primary(title,parent,expanded)`;
     fs.writeFileSync(path.join(__dirname, "fixtures/accordion","accordion-item-primary.pug"),accItemPrimary);
     fn = pug.compileFile(path.join(__dirname,"fixtures/accordion","accordion-item-primary.pug"));
-    actual = '<div class="panel panel-primary"><div class="panel-heading" role="tab" id="headingMy Accordion Item"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMyAccordionItem" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div class="panel-collapse collapse" id="collapseMyAccordionItem" role="tabpanel" aria-labelledby="headingMy Accordion Item"><div class="panel-body"></div></div></div>'; 
+    actual = '<div class="panel panel-primary"><div class="panel-heading" role="tab" id="headingMy Accordion Item"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionmyaccordion" href="#collapseMy_Accordion_Item" aria-expanded="true" aria-controls="collapseOne">My Accordion Item</a></h4></div><div class="panel-collapse collapse" id="collapseMy_Accordion_Item" role="tabpanel" aria-labelledby="headingMy Accordion Item"><div class="panel-body"></div></div></div>';
     it("should generate a primary accordion item", function() {
         assert.equal(actual, fn(locals));
     });