Skip to main content
Code Review

Return to Question

deleted 4 characters in body; edited tags
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

I've been working with jQuery for a few days now and starting to get the hang of it (it does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

  This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

The function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

I've been working with jQuery for a few days now and starting to get the hang of it (it does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

  This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

The function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

I've been working with jQuery for a few days now and starting to get the hang of it (it does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed). This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

The function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>
deleted 3 characters in body; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Multiple jQuery multiple statements in one function

So I've been working with jQuery for a few days now and starting to get the hang of it (Itit does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

theThe function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

jQuery multiple statements in one function

So I've been working with jQuery for a few days now and starting to get the hang of it (It does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

the function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

Multiple jQuery statements in one function

I've been working with jQuery for a few days now and starting to get the hang of it (it does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

The function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>
i -> I
Source Link
Marc-Andre
Marc-Andre
  • 6.8k
  • 5
  • 39
  • 65

So i'veI've been working with jQuery for a few days now. And and starting to get the hang of it (It does the thing that iI want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. But when iWhen I wrote it, it felt very ugly.

When iI press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

the function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

requested HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

So i've been working with jQuery for a few days now. And starting to get the hang of it (It does the thing that i want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. But when i wrote it, it felt very ugly.

When i press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

the function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

requested HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>

So I've been working with jQuery for a few days now and starting to get the hang of it (It does the thing that I want to do).

I've made an accordion, and the header of each accordion item has an arrow that points up (for being open) or down (for being closed).

This code works fine, does what it has to do. When I wrote it, it felt very ugly.

When I press a header of an item in the accordion, function gets called like this:

<div class="accordionHeadingDiv" onclick="leftActive(0, this)">

the function itself:

function leftActive(e, b) {
  $('.active').removeClass('active');
  $('.relative').eq(e).addClass('active');

  $('.arrowUp').addClass('arrowDown');
  $('.arrowUp').removeClass('arrowUp');
  $('.arrowDown', b).addClass('arrowUp');
  $('.arrowDown', b).removeClass('arrowDown');
}

HTML structure:

  <div class="overzicht">
    <div id="accordion">
      <div class="accordionHeadingDiv" onclick="leftActive(0, this)">
        <h3 class="accordionHeading"> Transport logistics </h3>
        <div class="arrowUp">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(1, this)">
        <h3 class="accordionHeading"> Real Estate </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(2, this)">
        <h3 class="accordionHeading"> Salt trade Winter Maintenance </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
      <div class="accordionHeadingDiv" onclick="leftActive(3, this)">
        <h3 class="accordionHeading"> Human Resources Solutions </h3>
        <div class="arrowDown">
        </div>
      </div>
      <div class="accordionContent">

      <?php require 'templates/dummyBedrijven.php'; ?>

      </div>
    </div>
  </div>
added 1500 characters in body; edited tags
Source Link
Kevinvhengst
Kevinvhengst
  • 165
  • 5
Source Link
Kevinvhengst
Kevinvhengst
  • 165
  • 5