If I understand your question correctly, in jQuery you could:
<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>
$(document).ready(function() {
$('h1.buttonHeader').click(function() {
// Get data attribute from clicked header
var correspondingDiv = $(this).attr('data-divider');
// Hide any open 'myDivider' dividers
$('.myDivider').hide();
// Display the corresponding divider
$(correspondingDiv).show();
})
})
I don't really understand why you're using the href attribute.
Edit: JSFiddle.
Edit: I've removed the loop as it wasn't necessary.