CODEWITHSUNDEEP
javascriptjqueryhtml
Benjamin
Benjamin

Reputation: 655

How to reduce this jquery toggle code for an image map

I am trying to figure out how to reduce this code down! it basically hides an image then show a div depending on what image map area is clicked!

I have a code pen of a working demo here: http://codepen.io/naniio/pen/wBExYq

$(document).ready(function() {
    $(".auckland").click(function() {
        $(".map").toggle();
        $("#aukl.hide").toggle();
    });

    $(".gisborne").click(function() {
        $(".map").toggle();
        $("#gisb.hide").toggle();
    });

    $(".wellington").click(function() {
        $(".map").toggle();
        $("#well.hide").toggle();
    });

    $(".nelson").click(function() {
        $(".map").toggle();
        $("#nel.hide").toggle();
    });

    $(".christchurch").click(function() {
        $(".map").toggle();
        $("#chch.hide").toggle();
    });

    $(".queenstown").click(function() {
        $(".map").toggle();
        $("#queen.hide").toggle();
    });

    $(".otago").click(function() {
        $(".map").toggle();
        $("#ota.hide").toggle();
    });
});

I have tried using find and other jquery methods but I must be looking in the wrong places

Any help would be great I'm new to jQuery but not new to stack overflow I can imagine this is an easy question/fix for some and this may be rated harshly or ignored! but for those who continually help this community regardless, thanks! :)

Upvotes: 0

Views: 224

Answers (5)

6502
6502

Reputation: 114539

Every time you need to add the same behavior to many different objects probably a good pattern is to use a function and dynamic creation.

For example in your specific case I'd expect to have

  • An image with the map (without dots)
  • A list of locations (possibly retrieved from a DB)
  • Code that for each of the locations creates the dot image correctly positioned on the map

Something like:

function addLocation(x, y, name, data) {
    var dot = document.createElement("img");
    dot.className = "dot";
    dot.onload = function() {
        // x,y coordinates are relative to map size to account
        // for responsive designs
        dot.left = (x*mapContainer.offsetWidth - dot.offsetWidth/2) + "px";
        dot.top = (y*mapContainer.offsetHeight - dot.offsetHeight/2) + "px";
        mapContainer.appendChild(dot);
    };
    dot.src = "dot.png";
    dot.onclick = function() {
        showMap(name, data);
    };
}

This way adding/changing a location only requires updating the database (or the static data array if using a database is not worth at the moment).

Adding by hand location names and chart names (that are random small variations one of the other like gisborne->gisb but christchurch->chch) is a step toward making the page a maintenance nightmare.

Upvotes: 0

Dominique Canlas
Dominique Canlas

Reputation: 149

I have something working in this pen. http://codepen.io/anon/pen/ByOEam Just add an extra attribute in the area tags

$(document).ready(function() {
    $(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
        $(".map").toggle();
        $("#"+toHide).toggle();
    });

    $(".hide").click(function() {
      $(".map").toggle();
      $(this).toggle();
    });


});

Upvotes: 1

Ramunas
Ramunas

Reputation: 3883

A little refactoring to <area> tags like this

<area shape="circle" coords="220,97,15" alt="Auckland" title="Auckland" href="#" data-ref="aukl.hide">

would cleanup your html from unnecessary classes and would give you cleaner javascript code:

$(document).ready(function() {
    $("map area").click(function() {
        $(".map").toggle();
        $("#" + this.data("ref")).toggle();
    });
});

Upvotes: 1

Amit
Amit

Reputation: 847

Try this reduced jquery code

$(document).ready(function() {
  $('.box').on('click',function(){
      $(".map").toggle();
      $(this).toggle();
  });
});

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Add class to the all the div that will be clicked, say "lands", and use following code,

$(".lands").click(function() {
    var $this = $(this);
    $(".map").toggle();
    $this.toggle();
});

Upvotes: 0

Related Questions