Issue with jQuery show/hide

Question

I wrote a script to take input from a clickable map and use that data to show or hide data collections hidden in a wrapper div. The script doesn't really work and I'm not sure what I'm doing incorrectly. Script is below for reference:

    function createCallback( i ){
  return function(){
    jQuery(".stateText").addClass("hidden");
    jQuery("#st_" + i + "-1").toggleClass("hidden");
  };
};

jQuery(document).ready(function ($) {
    for (let i = 1; i < 50; i++) {
        $("#st_" + i).click( createCallback(i) );

                    };
                    });

The idea behind my reasoning is that the script iterates over the fifty states that are assigned IDs that correspond to their alphabetical order (e.g. Alabama = st_1, etc).

Each of the data for each state starts off as a hidden element with a unique ID (of form st_i-1). When the event fires, it should hide all other elements with the class 'statetext' and then toggle the class of the selected element.

Here is a sample of the code for the show/hide div:

<div id="data-area">
           <div id="st_1-1" class="statetext hidden">
                <h4>Alabama</h4>
                <ul class="experience-list">
                <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li>
                <li>Mineral Property Management</li>
                </ul>
                <h4>Recent Projects</h4>
                <ul class="experience-list">
                <li>500+ mile multistate FERC pipeline</li>
                <li>700+ mile multistate FERC pipeline</li>
                <li>270+ mile multistate FERC pipeline</li>
                </ul>
            </div>

The actual application does not function properly. Click events often do not fire and the other divs are not getting the 'hidden' class added.

What am I doing wrong here?

score 0 · Answer 1 · answered Jun 21 '17 at 17:15

0

I am not sure that i understand your question, but this part doesn't look right to me.

<div id="st_1-1" class="statetext hidden">

has the ID st_1-1 (Avoid using special characters other than underscore in ID)

$("#st_" + i).click( createCallback(i) );

This will evaluate to st_1

st_1-1 is not same as st_1

I hope this will narrow down your solution :)

answered Jun 21 '17 at 17:15

Edison D'souza

4,551
5
28
39

Oh I'm sorry that wasn't clear. The ID that fires from clicking the map and the ID for the associated text are different (because they have to be). The map click has id st_1 and the associated data has the id st_1-1. – Ian Jun 21 '17 at 17:31
[Hyphens in IDs are perfectly legal in HTML5](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). Actually. they're legal in HTML4 too; it's other special characters that are not valid in HTML4. – cjl750 Jun 21 '17 at 17:31

uingtea · Answer 2 · 2017-06-21T21:01:13.817

edit: you have typo between jQuery(".stateText") and class="statetext hidden">

if you want to add event to st_1 then your html code above is incomplete, but maybe here what you want

function createCallback(i) {
  return function() {
    jQuery(".statetext").addClass("hidden");
    //console.log(i);
    jQuery("#st_" + i + "-1").toggleClass("hidden");
  };
};

jQuery(document).ready(function() {
  for (let i = 1; i < 50; i++) {
    $("#st_" + i).click(createCallback(i));

  };
});

.hidden{display:none}
.toggle{font-weight:bold;cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="st_1" class="toggle">+ toggle this state</div>
<div id="data-area">
  <div id="st_1-1" class="statetext hidden">
    <h4>Alabama</h4>
    <ul class="experience-list">
      <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li>
      <li>Mineral Property Management</li>
    </ul>
    <h4>Recent Projects</h4>
    <ul class="experience-list">
      <li>500+ mile multistate FERC pipeline</li>
      <li>700+ mile multistate FERC pipeline</li>
      <li>270+ mile multistate FERC pipeline</li>
    </ul>
  </div>
</div>
<div id="st_2" class="toggle">+ toggle this state</div>
<div id="data-area">
  <div id="st_2-1" class="statetext hidden">
    <h4>Alaska</h4>
    <ul class="experience-list">
      <li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li>
      <li>Mineral Property Management</li>
    </ul>
    <h4>Recent Projects</h4>
    <ul class="experience-list">
      <li>500+ mile multistate FERC pipeline</li>
      <li>700+ mile multistate FERC pipeline</li>
      <li>270+ mile multistate FERC pipeline</li>
    </ul>
  </div>
</div>

This doesn't function correctly. The code is supposed to apply the hidden class to all divs that are not the target div. So, for example, if someone had alabama displayed, and they then clicked california, alabama would be hidden and only california shown. Thank you for your answer though. — Ian, Jun 21 '17 at 20:12

score 0 · Answer 3 · answered Jun 21 '17 at 18:16

0

you can try to make your returned function into an iife:

so instead of:

function(){
    jQuery(".stateText").addClass("hidden");
    jQuery("#st_" + i + "-1").toggleClass("hidden");
  };

you can do:

(function(){
    jQuery(".stateText").addClass("hidden");
    jQuery("#st_" + i + "-1").toggleClass("hidden");
  }());

at least that way you are certain that your function gets called regardless.

answered Jun 21 '17 at 18:16

m.pettaway

26
3

This throws an error. I'm pretty sure that }()); needs to be })(); Regardless, it still doesn't work as this merely forces all of the items to be displayed. The big issue is that the hiding of all other elements does not function and I cannot, for the life of me, figure out why. – Ian Jun 21 '17 at 20:13

Issue with jQuery show/hide

3 Answers3