Mozilla Broken Accordion Tabs

by Akram kamal

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css">
<script src="//cdn.jsdelivr.net/foundation/4.1.2/js/foundation/foundation.js"></script>
<script src="//cdn.jsdelivr.net/foundation/4.1.2/js/foundation/foundation.section.js"></script>
<div class="row">
	<div class="large-12 columns">
        <h2>Accordion</h2>
		<div class="section-container accordion" data-section="accordion">
            
			<section class="qw">
                <select id="select">
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                          </select>
				<p class="title">
                    
                    <a href="#tab-1">Tab 1
                        
                    </a></p>
				<div class="content" data-slug="tab-1">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-2">Tab 2</a></p>
				<div class="content" data-slug="tab-2">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
			<section>
				<p class="title"><a href="#tab-3">Tab 3</a></p>
				<div class="content" data-slug="tab-3">
					<h3>Here's a Title</h3>
					<p>Here's a description</p>
				</div>
			</section>
		</div>
	</div>
</div>

CSS

.qw{
 position: relative;
}
#select{
    width:100px;
    position: absolute;
    top: 10px;
    left: 100px;
}

JavaScript

$(document).foundation();