Menu icon Foundation
Clicking Reveal Triggers Accordion

I have a Reveal modal trigger "embedded" in an accordion title. Clicking anywhere in the accordion title triggers the accordion -- which is what we want. However, clicking the modal trigger not only triggers the modal, but also the accordion.

<div id="posts">
	<ul class="accordion" data-allow-all-closed="true" role="tablist">
		<li class="accordion-item" data-accordion-item="">
			<a class="accordion-title" href="#" aria-controls="xg0gec-accordion" role="tab" id="xg0gec-accordion-label" aria-expanded="false" aria-selected="false">
				Wednesday 1.11.17
				<span class="button tiny" data-open="modal-18777" aria-controls="modal-18777" aria-haspopup="true" tabindex="0">GO</span>
			</a>
			<div class="accordion-content" data-tab-content="" role="tabpanel" aria-labelledby="xg0gec-accordion-label" aria-hidden="true" id="xg0gec-accordion" style="display: none;">
		</li>
	</ul>
</div>

The button's CSS:

.accordion .button {
	position:absolute;
	top: 50%;
	right: 1rem;
	margin-top: -0.75rem;
	z-index:1000;
}

I was hoping that by setting the z-index high enough, the button would "float" above the accordion title and thus not interfere. 

So what special jiggery-pokery is required in order for the reveal trigger to not affect the accordion here?

accordionrevealsitesjquerycss

I have a Reveal modal trigger "embedded" in an accordion title. Clicking anywhere in the accordion title triggers the accordion -- which is what we want. However, clicking the modal trigger not only triggers the modal, but also the accordion.

<div id="posts">
	<ul class="accordion" data-allow-all-closed="true" role="tablist">
		<li class="accordion-item" data-accordion-item="">
			<a class="accordion-title" href="#" aria-controls="xg0gec-accordion" role="tab" id="xg0gec-accordion-label" aria-expanded="false" aria-selected="false">
				Wednesday 1.11.17
				<span class="button tiny" data-open="modal-18777" aria-controls="modal-18777" aria-haspopup="true" tabindex="0">GO</span>
			</a>
			<div class="accordion-content" data-tab-content="" role="tabpanel" aria-labelledby="xg0gec-accordion-label" aria-hidden="true" id="xg0gec-accordion" style="display: none;">
		</li>
	</ul>
</div>

The button's CSS:

.accordion .button {
	position:absolute;
	top: 50%;
	right: 1rem;
	margin-top: -0.75rem;
	z-index:1000;
}

I was hoping that by setting the z-index high enough, the button would "float" above the accordion title and thus not interfere. 

So what special jiggery-pokery is required in order for the reveal trigger to not affect the accordion here?