Question: I'm trying to programmatically create some javascript buttons to toggle visibility on the page (for snappy tag filtering). This works for one tag:

```
trigger = ".sales-focus-btn"
target = ".sales-focus"

jQuery ->   
  $(trigger).toggle ->
    $("#primary-content").find('.container').hide()
    $("#primary-content").find(target).show()
  , ->
    $("#primary-content").find('.container').show()

```

Is it possible to do something similar in coffeescript, but with arrays, e.g.

```
trigger = [
  ".sales-focus-btn"
  ".service-focus-btn"
  ".other-focus-btn"
  ...
]
target = [
  ...
]

```

Is it possible to loop over and create a toggle for each type of tag?

**UPDATE**

Yes it's possible. Use the form:

```
myFunction = (el) -> console.log el
myFunction elem for elem in array

```

Answer: 
Of course it's possible:

```
content = $('#primary-content')
container = content.find('.container')

tags = [
    '.sales-focus'
    '.service-focus'
    '.other-focus'
]

$.each tags, (tag) ->
    target = content.find(tag)
    $(tag + "-btn").toggle ->
        container.hide()
        target.show()
    , ->
        container.show()

```

Remember to cache your DOM elements. Alternatively use `for tag in tags` instead of `jQuery.each tags, (tag) -> ...`:

```
for tag in tags
    do ->
      target = content.find(tag)
      $(tag + "-btn").toggle ->
        container.hide()
        target.show()
      , ->
        container.show()

```

(the `do ->` IIFE is necessary to keep each `target` in scope, as @epidemian pointed out)
You can call `toggle` in a loop, but you have to be aware of the weird JS scoping rules. Basically, if you generate a function inside a loop, like this:

```
for n in [1, 2, 3]
  $(".btn-#{n}").click -> alert "you clicked #{n}"

```

You will notice that [all the buttons print "you clicked 3" when pressed](http://jsfiddle.net/qNS2d/). That's because the the scope of the `n` variable is not limited to the body of the loop, but to all the function that contains that loop. So, when the loop runs the value of `n` is changed it's final value is 3. As all the functions created inside the loop have a reference to that same variable `n`, they will all print 3 when executed after the loop has finished. In CoffeeScript, you can circumvent this issue using a [`do statement`](http://coffeescript.org/#loops), which will basically introduces new block-scoped variables:

```
for n in [1, 2, 3]
  do (n) ->
    $(".btn-#{n}").click -> alert "you clicked #{n}"

```

Or using an auxiliary function:

```
setupClick = (n) -> 
  $(".btn-#{n}").click -> alert "you clicked #{n}"

setupClick n for n in [1, 2, 3]

```

With that in mind, you could implement your loop like so (this is an adaptation of [Ricardo's answer](https://stackoverflow.com/a/11371528/581845)):

```
$content = $('#primary-content')
$container = $content.find('.container')

targetsByTrigger =
  '.sales-focus-btn': '.sales-focus'
  '.service-focus-btn': '.service-focus'
  '.other-focus-btn': '.other-focus'

setupTrigger = (trigger, target) ->
  $(trigger).toggle ->
    $container.hide()
    $content.find(target).show()
    console.log 'showing', target
  , ->
    $container.show()

setupTrigger trigger, target for trigger, target of targetsByTrigger

```

Notice that i put both the triggers and targets class names in an object so the trigger class name can be from `<target class name>-btn`; if that's not the case, then sticking to an array like `['.sales-focus', '.service-focus', '.other-docus']` and then adding `-btn` is probably better. Also, i like the convention of using `$` as a prefix for "jQuerized" values, but that's just personal preference :)