Reputation: 59

Stop writing the same function multiple times

So I might be throwing myself to the lions here but...

I'm just not sure how to write the jquery below so I don't have to repeat the function over and over again if/when more accordions are to be added in the future. I don't know how to target the ID that ends in a number.

Thanks in advance.

$('#acc-group-1 > .aria-accordion').click(function() {
  $('#acc-group-1 > .aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();

});

$('#acc-group-2 > .aria-accordion').click(function() {
  $('#acc-group-2 >.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();

});

.aria-accordion {
  margin-bottom: 30px;
  position: relative;
}

.corner-stripes {
  content: '';
  background: url(../img/new_corner_stripes.svg);
  background-repeat: no-repeat;
  width: 120px;
  position: absolute;
  z-index: 3;
  top: 0;
  right: -10px;
  overflow: hidden;
  height: 58px;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}

.aria-accordion.open .corner-stripes {
  height: 120px;
}

.aria-accordion-item {
  background: #e8e8e8;
  padding: 25px 30px;
  display: none;
  margin-bottom: 30px;
}

.aria-accordion-trigger h6 {
  cursor: pointer;
  margin: 0;
  padding: 15px 0;
  text-indent: 70px;
  position: relative;
  font-size: 20px;
  color: #000;
  background: #e8e8e8;
  background-position: top left;
  background-size: cover;
  z-index: 1;
}

a.aria-accordion-trigger {
  position: relative;
  display: block;
}

a.aria-accordion-trigger::before {
  position: absolute;
  left: 10px;
  top: -10px;
  width: 43px;
  height: 49px;
  background: rgba(252, 221, 0, 0.8);
  content: '\f067';
  font-family: fontAwesome;
  font-size: 25px;
  text-align: center;
  line-height: 49px;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.aria-accordion.open a.aria-accordion-trigger::before {
  content: '\f068';
}

a.aria-accordion-trigger:hover::before,
.aria-accordion.open a.aria-accordion-trigger::before {
  background: #00b3e3;
}

.aria-accordion ul {
  margin-left: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acc-group-1">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

<div id="acc-group-2">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

Upvotes: 2

Answers (3)

Mohamed-Yousef

Reputation: 24001

For me I think no need to use .each() like other answers suggested .. you can just use [id^=acc-group] selector and inside the click event to select all the .aria-accordion.open class from the parent [id^=acc-group] you need to use .closest() and .find() .. that's it .. So your code should be something like this

$('[id^=acc-group] > .aria-accordion').click(function() {
  $(this).closest('[id^=acc-group]').find('.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();
});

[id^=acc-group] mean select all elements there id ^ starts with acc-group also you can use acc-group- you can read more about Selectors Here

Upvotes: 4

Mohammad Hamedani

Reputation: 3354

You can use "[id^='acc-group-']" that give elements that id property start with acc-group-.

    
$('[id^="acc-group-"] > .aria-accordion').click(function() {
  $(this).closest('[id^=acc-group]').find('.aria-accordion.open').not(this).removeClass('open').children('.aria-accordion-item').slideUp();
  $(this).toggleClass('open');
  $(this).children('.aria-accordion-item').slideToggle();
});

.aria-accordion {
  margin-bottom: 30px;
  position: relative;
}

.corner-stripes {
  content: '';
  background: url(../img/new_corner_stripes.svg);
  background-repeat: no-repeat;
  width: 120px;
  position: absolute;
  z-index: 3;
  top: 0;
  right: -10px;
  overflow: hidden;
  height: 58px;
  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  -ms-transition: all 400ms linear;
  transition: all 400ms linear;
}

.aria-accordion.open .corner-stripes {
  height: 120px;
}

.aria-accordion-item {
  background: #e8e8e8;
  padding: 25px 30px;
  display: none;
  margin-bottom: 30px;
}

.aria-accordion-trigger h6 {
  cursor: pointer;
  margin: 0;
  padding: 15px 0;
  text-indent: 70px;
  position: relative;
  font-size: 20px;
  color: #000;
  background: #e8e8e8;
  background-position: top left;
  background-size: cover;
  z-index: 1;
}

a.aria-accordion-trigger {
  position: relative;
  display: block;
}

a.aria-accordion-trigger::before {
  position: absolute;
  left: 10px;
  top: -10px;
  width: 43px;
  height: 49px;
  background: rgba(252, 221, 0, 0.8);
  content: '\f067';
  font-family: fontAwesome;
  font-size: 25px;
  text-align: center;
  line-height: 49px;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.aria-accordion.open a.aria-accordion-trigger::before {
  content: '\f068';
}

a.aria-accordion-trigger:hover::before,
.aria-accordion.open a.aria-accordion-trigger::before {
  background: #00b3e3;
}

.aria-accordion ul {
  margin-left: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="acc-group-1">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

<div id="acc-group-2">

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend.</p>
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>

  <div class="aria-accordion">
    <div role="heading">
      <a href="#" class="aria-accordion-trigger" role="button" id="aria-accordion-item-1" aria-controls="sect1">
        <h6>Accordion Toggle / Title</h6>
      </a>
      <div class="corner-stripes"></div>
    </div>
    <div class="aria-accordion-item" role="region" aria-labelledby="aria-accordion-item-1" id="sect1">
      <h4 class="">Accordion Header Level 4 28PT</h4>
      <p class="copy">Pellentesque habitant morbi tristique <a id="target">senectus et netus</a> et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
        mi vitae est. Mauris placerat eleifend.</p>
    </div>
  </div>


  <hr/>
</div>

Upvotes: 1

Baruch

Reputation: 2428

You could use $each.

Something like this might work. Note that this is untested but still gives you an idea on how to use the method.

$('.aria-accordion').each(function() {
  $(this).on('click', function() {
    $(this).find('open').removeClass('open').children('.aria-accordion-item').slideUp();
    $(this).toggleClass('open');
    $(this).children('.aria-accordion-item').slideToggle();
  });
});

Upvotes: 0

Stop writing the same function multiple times

Answers (3)

Related Questions