Question
I can not make these to work properly. I want the accordion to load closed, and then be expandable on click. What I now have are two accordions that load expanded, and the buttons on both are only working for the first one. I am unable to collapse the second. Here is my code:
https://stackoverflow.com/questions/22147526
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<h2 class="h4 margins">Open Job Positions</h2>
<div class="margin-wrapper">
<div class="panel-group" id="accordion">
<div class="panel panel-longform">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="pull-right"><i class="glyphicon glyphicon-minus-sign"></i></span>
Python team leader (Tel Aviv, Belgrade)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p class="lead">We are looking for enthusiastic and talented team leader to join our small team in Tel Aviv or Belgrade.</p>
<h4>Responsibilities:</h4>
<ul>
<li>Managing a team of A-class engineers</li>
<li>Developing scalable high-load web services in the cloud</li>
<li>Real-time backoffice with business intelligence</li>
<li>Multiple platforms (web, mobile)</li>
</ul>
<h4>Qualifications:</h4>
<ul>
<li>3+ years of leading a team in a dynamic environment (hands-on)</li>
<li>Python, Ruby or similar language</li>
<li>MVC web frameworks (Django preferred)</li>
<li>Excellent English verbal and written communications skills</li>
<li>SQL and relational database design</li>
<li>Algorithms, data structures and software design patterns</li>
<li>Linux Command Line Fu</li>
</ul>
<h4>Bonus</h4>
<ul>
<li>REST APIs</li>
<li>Javascript</li>
<li>HTML5</li>
<li>Scrum master</li>
<li>Opensource projects</li>
<li>Trading systems experience</li>
</ul>
<h4>Perks</h4>
<ul>
<li>Pick your tech gear</li>
<li>Agile environment</li>
<li>Cool office</li>
<li>Subsidized food</li>
<li>Unlimited coffee capsules</li>
</ul>
<h4>Personality</h4>
<ul>
<li>Meet deadlines and milestones</li>
<li>Like to learn new things</li>
<li>A sense of humor!</li>
</ul>
<hr>
<p>Excited? If you think you fit and can get things done, welcome aboard!</p>
<p>
<a href="mailto:careers@tradecrowd.com?subject=Python team leader (Tel Aviv, Belgrade)" class="btn btn-primary">Apply for This Position</a>
</p>
</div>
</div>
</div> <!-- /.panel -->
<!-- <div class="panel panel-longform">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span>
Some other position with an initial closed state
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p class="lead">We are seeking an experienced Community and Brand Manager to help grow the TradeCrowd community and brand globally.</p>
<h4>What you will be doing:</h4>
<ul>
<li>Be our ambassador: you'll be the voice of TradeCrowd in all communication channels from our social media to (future) offline meetings with the community</li>
<li>Managing our social media presence, especially Facebook and Twitter, crafting and executing creative and engaging social campaigns for different target groups</li>
<li>Working closely with our community to ensure we are listening to what they want</li>
<li>Be responsible for setting KPI's and metrics, monitoring impact, and constantly improving what you do and how you do it</li>
</ul>
<h4>Skills you should have:</h4>
<ul>
<li>2+ years in a consumer-facing social media or digital PR role</li>
<li>100% digital native. you live the web.</li>
<li>Strong understanding of social media and online marketing</li>
<li>Excellent English verbal and written communications skills</li>
<li>Confident with the creative side of the job AND measurement and evaluation reporting</li>
<li>Knowledge of tools such as Google Analytics, Mailchimp, Hootsuite, Surveymonkey, etc.</li>
<li>Be able to work with little supervision in a fast paced, dynamic and entrepreneurial environment</li>
</ul>
<hr>
<p>
<a href="mailto:careers@tradecrowd.com?subject=Community and Brand Manager (Belgrade)" class="btn btn-primary">Apply for This Position</a>
</p>
</div>
</div>
</div>--> <!-- /.panel -->
</div> <!-- /.panel-group -->
</div>
<br>
<br>
<div class="margin-wrapper">
<div class="panel-group" id="accordion">
<div class="panel panel-longform">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="pull-right"><i class="glyphicon glyphicon-minus-sign"></i></span>
Python team leader (Tel Aviv, Belgrade)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p class="lead">We are looking for enthusiastic and talented team leader to join our small team in Tel Aviv or Belgrade.</p>
<h4>Responsibilities:</h4>
<ul>
<li>Managing a team of A-class engineers</li>
<li>Developing scalable high-load web services in the cloud</li>
<li>Real-time backoffice with business intelligence</li>
<li>Multiple platforms (web, mobile)</li>
</ul>
<h4>Qualifications:</h4>
<ul>
<li>3+ years of leading a team in a dynamic environment (hands-on)</li>
<li>Python, Ruby or similar language</li>
<li>MVC web frameworks (Django preferred)</li>
<li>Excellent English verbal and written communications skills</li>
<li>SQL and relational database design</li>
<li>Algorithms, data structures and software design patterns</li>
<li>Linux Command Line Fu</li>
</ul>
<h4>Bonus</h4>
<ul>
<li>REST APIs</li>
<li>Javascript</li>
<li>HTML5</li>
<li>Scrum master</li>
<li>Opensource projects</li>
<li>Trading systems experience</li>
</ul>
<h4>Perks</h4>
<ul>
<li>Pick your tech gear</li>
<li>Agile environment</li>
<li>Cool office</li>
<li>Subsidized food</li>
<li>Unlimited coffee capsules</li>
</ul>
<h4>Personality</h4>
<ul>
<li>Meet deadlines and milestones</li>
<li>Like to learn new things</li>
<li>A sense of humor!</li>
</ul>
<hr>
<p>Excited? If you think you fit and can get things done, welcome aboard!</p>
<p>
<a href="mailto:careers@tradecrowd.com?subject=Python team leader (Tel Aviv, Belgrade)" class="btn btn-primary">Apply for This Position</a>
</p>
</div>
</div>
</div> <!-- /.panel -->
<!-- <div class="panel panel-longform">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span>
Some other position with an initial closed state
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p class="lead">We are seeking an experienced Community and Brand Manager to help grow the TradeCrowd community and brand globally.</p>
<h4>What you will be doing:</h4>
<ul>
<li>Be our ambassador: you'll be the voice of TradeCrowd in all communication channels from our social media to (future) offline meetings with the community</li>
<li>Managing our social media presence, especially Facebook and Twitter, crafting and executing creative and engaging social campaigns for different target groups</li>
<li>Working closely with our community to ensure we are listening to what they want</li>
<li>Be responsible for setting KPI's and metrics, monitoring impact, and constantly improving what you do and how you do it</li>
</ul>
<h4>Skills you should have:</h4>
<ul>
<li>2+ years in a consumer-facing social media or digital PR role</li>
<li>100% digital native. you live the web.</li>
<li>Strong understanding of social media and online marketing</li>
<li>Excellent English verbal and written communications skills</li>
<li>Confident with the creative side of the job AND measurement and evaluation reporting</li>
<li>Knowledge of tools such as Google Analytics, Mailchimp, Hootsuite, Surveymonkey, etc.</li>
<li>Be able to work with little supervision in a fast paced, dynamic and entrepreneurial environment</li>
</ul>
<hr>
<p>
<a href="mailto:careers@tradecrowd.com?subject=Community and Brand Manager (Belgrade)" class="btn btn-primary">Apply for This Position</a>
</p>
</div>
</div>
</div>--> <!-- /.panel -->
</div> <!-- /.panel-group -->
</div>
Solution
You are using Bootstrap accordion.
<div id="collapseOne" class="panel-collapse collapse in"><div id="uniq-ID" class="panel-collapse collapse"><a class="accordion-toggle"><a href="#uniq-ID" class="accordion-toggle">OTHER TIPS
The part about your closure is as followed. Pulling up the API documentation of the Jquery Acordion is pretty simple. A quick look and search learns bassically that it requires a bollean stated in your script tag i posted up in the comments.
http://api.jqueryui.com/accordion/
Active: Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
So techincally what you need to do is as followed:
$( ".selector" ).accordion({ active: 2 });
how to fit that in your code, i dont know, since i dont know your code and how you entered it in your page. if you done it like i had done (within the comments section of your question), it's like that.
Remember: The selector needs to be replaced by your Id, just like you designated the accordion to your div Id earlier.
