 <p>It's not necessary to give each div it's own class or ID.</p> <p>You could give them all the same class and use the jQuery eq: filter to choose the correct div.</p> <p>Example code:</p> <pre><code>$(".custom button").click(function(){ var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case. $('.custom').hide(); $('.custom:eq(' + nextDiv + ')').show(); }); </code></pre> <p>Working example: <a href="https://jsfiddle.net/ore5h6tk/" rel="nofollow">https://jsfiddle.net/ore5h6tk/</a></p> <p>Another example, hiding all but the first with CSS: <a href="https://jsfiddle.net/ore5h6tk/1/" rel="nofollow">https://jsfiddle.net/ore5h6tk/1/</a></p> <p>Hope this helps.</p>