Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted March 21st, 2016
Don't Repeat Yourself

I’m going to explain to you why you should not repeat yourself when writing code. I’m going to give a simple example with toggles in jQuery.

First example

I created two div’s that can be toggled.

<section class="toggleDemo">
  <h2>Toggle Demo</h2>
    <p>Jokes</p>
        <div class="toggle">
          <p>What does a baby computer call his father?</p>
          <p>Click to see the answer</p>
          <p>Data</p>
        </div>
        <div class="toggle">
          <p>How many programmers does it take to change a light bulb?</p>
          <p>Click to see the answer</p>
          <p>None, that's a hardware problem.</p>
      </div>
</section>
$(document).ready(function() {
    $('.toggleDemo > div:nth-child(3)').click(function(){
         $('.toggleDemo > div:nth-child(3) > p:nth-child(3)').slideToggle('normal');
    });
    $('.toggleDemo > div:nth-child(4)').click(function(){
         $('.toggleDemo > div:nth-child(4) > p:nth-child(3)').slideToggle('normal');
    });
});

Live demo here

Lets add a third toggle

I created a third div, and necessary jQuery code.

<section class="toggleDemo">
  <h2>Toggle Demo</h2>
    <p>Jokes</p>
        <div class="toggle">
          <p>What does a baby computer call his father?</p>
          <p>Click to see the answer</p>
          <p>Data</p>
        </div>
        <div class="toggle">
          <p>How many programmers does it take to change a light bulb?</p>
          <p>Click to see the answer</p>
          <p>None, that's a hardware problem.</p>
      </div>
      <div class="toggle">
          <p>Why did the programma quit his job?</p>
          <p>Click to see the answer</p>
          <p>Because he didn't get a raise</p>
      </div>
</section>
$(document).ready(function() {
    $('.toggleDemo > div:nth-child(3)').click(function(){
         $('.toggleDemo > div:nth-child(3) > p:nth-child(3)').slideToggle('normal');
    });
    $('.toggleDemo > div:nth-child(4)').click(function(){
         $('.toggleDemo > div:nth-child(4) > p:nth-child(3)').slideToggle('normal');
    });
    $('.toggleDemo > div:nth-child(5)').click(function(){
         $('.toggleDemo > div:nth-child(5) > p:nth-child(3)').slideToggle('normal');
    });
});

Live demo here

The problem

As you can see, I have to write extra jQuery for every toggle. The code is hard to understand, hard to maintain and if I change something inside the toggle div, everything will stop working.

The solution

I should be able to writer smarter code, and that exactly what I did.
I created new jQuery code that would apply to every toggle. I’m not repeating myself, the code is cleaner, easier to understand and better to maintain.

$(document).ready(function() {
    $('.toggle').on('click', function() {
        var toToggle = $(this).find(".joke");
        toToggle.slideToggle('normal');
    });
});

Live demo here

Posted by Nathan Taal

Leave a Reply

Your email address will not be published. Required fields are marked *