[英]Accordion Panel Collapse
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:
这是我的代码:
<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>
You are using Bootstrap accordion . 您正在使用Bootstrap手风琴 。
<div id="collapseOne" class="panel-collapse collapse in">
<div id="uniq-ID" class="panel-collapse collapse">
<div id="uniq-ID" class="panel-collapse collapse">
使用唯一的ID <a class="accordion-toggle">
<a class="accordion-toggle">
的“ href” <a href="#uniq-ID" class="accordion-toggle">
<a href="#uniq-ID" class="accordion-toggle">
The part about your closure is as followed. 有关关闭的部分如下。 Pulling up the API documentation of the Jquery Acordion is pretty simple.
拉起Jquery Accordion的API文档非常简单。 A quick look and search learns bassically that it requires a bollean stated in your script tag i posted up in the comments.
快速浏览和搜索使人大开眼界,发现我需要在您的脚本标签中声明我所说的bollean。
http://api.jqueryui.com/accordion/ http://api.jqueryui.com/accordion/
Active: Boolean: Setting active to false will collapse all panels.
Active:布尔值:将active设置为false将折叠所有面板。 This requires the collapsible option to be true.
这要求可折叠选项为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. 请记住:选择器需要用您的ID替换,就像您之前将手风琴指定给div ID一样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.