Js click function that copies a divs class on click and stores it as a variable

Question

Still need help.

I'm looking to set up a click function that sniffs for the divs class that's clicked and stores it as a variable. To than use that variable to toggle slideDown the relative div.

JS

var $clickedOn = ...;

$( ".color" ).click(function() {
  $('.information').slideUp('slow');
  $( ".(clickedOn).tuckinfo" ).slideDown('slow');
}); 

HTML

This is what is being clicked.

<div class="color-list">
  <div class="container">
    <section class="color hospitality">

This is what I want to drop down when clicked.

<div class="greybg tuckinfo">
  <div class="container">
    <div class="hospitality-extended">

Codepen

http://i.imgur.com/nlA9O3M.gif http://imgur.com/nlA9O3M

Answer 1

You can use the class attribute. this contains the element that was clicked on

$( ".color" ).click(function() 
{
  var className = '.' + $(this).attr('class').replace('color','').split(/\s+/).join('.');
  $('.information').slideUp('slow');
  $( ".greybg.tuckinfo .container " + className + '-expanded').slideDown('slow');
}); 

Answer 2

I looked at your markup, and I'm going to take a stab at a fuller solution.

The solution was to add data attributes to the elements from which you want to trigger the slide up/down, and then corresponding data attributes for the elements that will be affected.

<div data-trigger-action="set1">Click Me</div>

<div data-trigger-key="set1">Slide me 'round</div>

Then in your JS:

$("[data-trigger-action]").on("click", function(e)
{
    e.preventDefault();

  var _key = $(this).attr("data-trigger-action");

  $triggerKeys
    .filter('[data-trigger-key!="' + _key + '"]').slideUp()
    .end().filter('[data-trigger-key="' + _key + '"]').slideDown();
});

See this codepen for a working example.

(Note: I may have misidentified the items you want to affect, so moving the [data-trigger-key] attributes around should resolve that.)

EDIT

Here's the updated JS code, which would use your original HTML:

  // configure some action keys and selectors for elements to apply them to
  var keysToApply = {
    /* 'key/value to share': ['jquery-selector-to-action-el', 'jquery-selector-to-target-el'] */
    'hospitality': ['.color-list .color.hospitality', '.greybg.tuckinfo'],
    'taverns': ['.color-list .color.taverns', '#wrapper .information']
  };

  // loop through our config and apply the data attributes
  $.each(keysToApply, function(key, params)
  {
    $(params[0]).attr('data-trigger-action', key);
    $(params[1]).attr('data-trigger-key', key);
  })

  // cache our jQuery objects for our actions/keys
  var $triggerActions = $('[data-trigger-action]'),
      $triggerKeys = $('[data-trigger-key]');

  // handle the sliding up/down of items on click
  $("[data-trigger-action]").on("click", function(e)
  {
    e.preventDefault();

    var _key = $(this).attr("data-trigger-action");

    $triggerKeys
      .filter('[data-trigger-key!="' + _key + '"]').slideUp()
      .end().filter('[data-trigger-key="' + _key + '"]').slideDown();
  });

Answer 3

You can get the target from onousedown :

window.onmousedown = function (event) {console.log(event.target);}

That should log your element