CODEWITHSUNDEEP
javascriptjqueryhtml
Cameron Scott
Cameron Scott

Reputation: 1306

Accurately targeting <div> in jQuery

I am building an interactive quiz for users of my app. The questions are table based, and can be answered "yes," "no," or "maybe." If the user answers "no" or "maybe," I would to slide open an informational panel that lives beneath the table.

Here is the code for the table and info panel:

<div class="row quiz">
  <div class="col-md-12">
    <div class="table-responsive">
      <table class="table">
    <thead>
      <tr class="active">
        <th colspan="3"><strong>1. Executive Support</strong></th>
        <th><strong>Yes</strong></th>
        <th><strong>No</strong></th>
        <th><strong>Don't Know</strong></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="3">Do the executives prioritize—or express a desire to prioritize—initiatives based on patient and family needs?</td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="no-toggle" name="toggle" id="optionsRadios1" value="option1">
            </label>
          </div>
        </td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle" id="optionsRadios2" value="option2">
            </label>
          </div>
        </td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle" id="optionsRadios3" value="option3">
            </label>
          </div>    
        </td>
      </tr>
      <tr>
        <td colspan="3">Do you have the support of your executive management group?</td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="no-toggle" name="toggle2" id="optionsRadios2" value="option5">
            </label>
          </div>
        </td>            <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle2" id="optionsRadios2" value="option5">
            </label>
          </div>
        </td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle2" id="optionsRadios3" value="option6">
            </label>
          </div>    
        </td>
      </tr>
      <tr>
        <td colspan="3"> Do you presently have commitment from key administrative and clinical champions to help overcome <br>the inevitable barriers to designing and delivering ideal care experiences?</td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="no-toggle" name="toggle3" id="optionsRadios2" value="option5">
            </label>
          </div>
        </td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle3" id="optionsRadios2" value="option2">
            </label>
          </div>
        </td>
        <td class="radio-button">
          <div class="radio">
            <label>
              <input type="radio" class="toggle" name="toggle3" id="optionsRadios3" value="option3">
            </label>
          </div>    
        </td>
      </tr>
    </tbody>
  </table>
</div><!-- table-responsive-->
<div class="row notes_section clear">
    <div class="notes_wrap js-notes">
        <a href="#" class="active">Build More Executive Support in Your Organization</a>
        <div class="notes_main_wrap" style="display: block;">
            <div class="notes_item">
                    <p>If you're having difficulty obtaining support from your organization's leadership, it can help to demonstrate some of the real-world successes of other Working Groups. You can approach this in a variety of ways:</p>
                    <ol>
                        <li>Provide your leadership with  PFCC Step-by-Step: The Business Case [Document Forthcoming], which explains why PFCC Step-by-Step is the singular tool for care transformation.</li>
                        <li>Explain how front-line care givers that participate in PFCC Step-by-Step often experience an improved morale, as well as an  increased emotional connection with patients and families.</li>
                        <li>Explain that the principles of PFCC Step-by-Step have been endorsed by leading healthcare institutions worldwide. To further illustrate, <a href="https://www.youtube.com/watch?v=sGlJDk6WOxM&amp;list=PLqj3nHFwDQMRB4F_P4303ixiD_sxOQ0Vt&amp;index=61" target="_blank">share this video</a> with your leadership. 
                    </li></ol>
            </div><!-- /notes_item -->
        </div><!-- notes_main_wrap -->
    </div><!--notes_wrap -->
</div><!--notes_section -->

And here is my jQuery:

$('document').ready(function() {

//Quiz Toggle Functionality
$('input:radio[class^="toggle"]').change(
function(){
    if ($(this).is(':checked')) {
        $('.js-notes > a').addClass('active');
        $('.js-notes > a').next('.notes_main_wrap').slideDown();
        return false;
    }
});
$('input:radio[class^="no-toggle"]').change(
function(){
    if ($(this).is(':checked')) {
        $('.js-notes > a').removeClass('active');
        $('.js-notes > a').next('.notes_main_wrap').slideUp();
        return false;
    }
});
});

However, my solution unfolds every instance of the .notes_main_wrap div on the page (there are four.) I only want to unfold the next instance, not all of them. What jQuery selector do I need to use to only target the next instance of a class on the page?

Upvotes: 0

Views: 66

Answers (1)

Me.Name
Me.Name

Reputation: 12544

To get the next element, you can first search upwards to the nearest '.table-responsive' parent and then get the next element : $(this).closest('.table-responsive').next('div').find('.js-notes > a') Fortunately, you can combine the 2 functions into one and toggle the toggling so to speak with toggleClass and slideToggle:

$('input:radio.toggle, input:radio.no-toggle').change(
function(){
    if ($(this).val()) {
        var toggle = $(this).hasClass('toggle'); 

        $(this).closest('.table-responsive').next('div').find('.js-notes > a')
            .toggleClass('active', toggle)
            .next('.notes_main_wrap').slideToggle(toggle);
        return false;
    }
});

Example: Fiddle

NB: the original working in which only the last changed input determines if the comments are shown, is unchanged. If you'd want to check if any of the options are 'yes', an additional query would be needed.

NB2: the ids and toggle values were ..uhm.. not entirely accurate in the example html, neither are they in the copy/pasted example, so the checkboxes might influence one and other. However the jquery code itself should work as far as finding the next js notes etc. is concerned.

Upvotes: 1

Related Questions