× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Fix click targets with CSS - Not jQuery

Bryan Rayner
Dec 31, 2014
<p>Today, someone had a problem with click targets in a Bootstrap Accordion not stretching to the entire width of the div. Clicking on the text would toggle the accordion - clicking on the title bar somewhere else would not.</p><p>Sample code:</p><p>&lt;h4 class = "panel-title"&gt;<br>&lt;a&gt;Accordion Title&lt;/a&gt;<br>&lt;/h4&gt;</p><p>The structure of the HTML was unable to be changed as it was hand written across hundreds of accordion instances. An attempt had been made to use jQuery to listen to click events on the h4's, and in turn trigger a click event on the nested anchor tag. This worked intermittedly.</p><p>Instead of working to fix the jQuery substitute, CSS was used instead. </p><p>.panel-title &gt; a<br>{<br>width:100%;<br>display:block;<br>}</p><p>This fixed the problem. Always rely on the built-in capabilities of the browser and CSS, before resorting to Javascript to fix your problem.</p>
comments powered by Disqus