CODEWITHSUNDEEP
classhtmlaccordion
Vuk
Vuk

Reputation: 3

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:[email protected]?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:[email protected]?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:[email protected]?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:[email protected]?subject=Community and Brand Manager (Belgrade)" class="btn btn-primary">Apply for This Position</a>
      </p>
    </div>
  </div>
</div>--> <!-- /.panel -->

</div> <!-- /.panel-group -->

</div>

Upvotes: 0

Views: 861

Answers (2)

Iqbal Kabir
Iqbal Kabir

Reputation: 1630

You are using Bootstrap accordion.

  1. To make all collapsed remove all "in" class from all
    <div id="collapseOne" class="panel-collapse collapse in">
  2. Use an unique ID for each <div id="uniq-ID" class="panel-collapse collapse">
  3. Use that ID as the "href" to the relevant <a class="accordion-toggle">
    For example, <a href="#uniq-ID" class="accordion-toggle">

Upvotes: 1

Dorvalla
Dorvalla

Reputation: 5240

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.

Upvotes: 0

Related Questions