1

This is my code. is there any other way?

    $("._nf-short-ans").on("click", function(){
        $(".nf-short-desc").removeClass("nf-hide");
        $(".nf-main-c").addClass("nf-hide");
        $(".nf-btn-opt").addClass("nf-hide");
        $(".nf-para-c").addClass("nf-hide");
        $(".nf-date-c").addClass("nf-hide");
        $(".nf-time-c").addClass("nf-hide");
        $(".nf-other-c").addClass("nf-hide");
    });
    
    $("._nf-para").on("click", function(){
        $(".nf-para-c").removeClass("nf-hide");
        $(".nf-main-c").addClass("nf-hide");
        $(".nf-btn-opt").addClass("nf-hide");
        $(".nf-short-desc").addClass("nf-hide");
        $(".nf-date-c").addClass("nf-hide");
        $(".nf-time-c").addClass("nf-hide");
        $(".nf-other-c").addClass("nf-hide");
    });

    $("._nf-date").on("click", function(){
        $(".nf-date-c").removeClass("nf-hide");
        $(".nf-main-c").addClass("nf-hide");
        $(".nf-btn-opt").addClass("nf-hide");
        $(".nf-short-desc").addClass("nf-hide");
        $(".nf-time-c").addClass("nf-hide");
        $(".nf-para-c").addClass("nf-hide");
        $(".nf-other-c").addClass("nf-hide");        
    });
    
    $("._nf-time").on("click", function(){
        $(".nf-time-c").removeClass("nf-hide");
        $(".nf-main-c").addClass("nf-hide");
        $(".nf-btn-opt").addClass("nf-hide");
        $(".nf-short-desc").addClass("nf-hide");
        $(".nf-para-c").addClass("nf-hide");
        $(".nf-date-c").addClass("nf-hide");
        $(".nf-other-c").addClass("nf-hide");        
    });

    $("._nf-multi-choice, ._nf-checkbox").on("click", function(){
        $(".nf-para-c").addClass("nf-hide");
        $(".nf-main-c").removeClass("nf-hide");
        $(".nf-other-c").removeClass("nf-hide");
        $(".nf-btn-opt").removeClass("nf-hide");
        $(".nf-short-desc").addClass("nf-hide");
        $(".nf-date-c").addClass("nf-hide");
        $(".nf-time-c").addClass("nf-hide");
    });
.nf-hide {
    display: none !important;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
                        <div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
                            <div class="rdo-wrapper fullwidth" id="opt_1">
                                <input id="rdo8" type="radio" name="sample4" class="rdo">
                                <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
                                    <div class="col col-12">
                                      <div class="nf-opt-c">
                                        <div class="nf-input-opt">
                                          <input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
                                          <span></span>
                                        </div>
                                        <div class="nf-aImage-c">
                                          <div class="nf-opt-icon _nf-aImage-opt"></div>
                                        </div>
                                        <div class="nf-close-c">
                                          <div class="nf-opt-icon _nf-close-opt"></div>
                                        </div>
                                      </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="col col-12 margin-top-10 nf-short-desc">
                          <div class="nf-short-desc-c">
                            <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
                            <span></span>
                          </div>
                        </div>

                        <div class="col col-12 margin-top-10 nf-para-c nf-hide">
                          <div class="nf-para-input">
                            <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
                            <span></span>
                          </div>
                        </div>

                        <div class="col col-12 margin-top-10 nf-date-c nf-hide">
                          <div class="nf-date-input">
                            <input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
                            <span></span>
                          </div>
                        </div>

                        <div class="col col-12 margin-top-10 nf-time-c nf-hide">
                          <div class="nf-time-input">
                            <input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
                            <span></span>
                          </div>
                        </div>
                    </div>                            

<div class="nf-dropdown">
                                <div class="nf-select-c">
                                  
                                  <div class="nf-default-opt">
                                    <div class="nf-li">
                                      <div class="nf-opt" data-value="nf-multi">
                                        <div class="nf-icon _nf-icon-chk"></div>
                                        <div class="nf-p">Multiple Choice</div>
                                      </div>
                                    </div>
                                  </div>
                                  
                                  <div class="nf-opt-ul">
                                    
                                     <div class="nf-li">
                                      <div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
                                        <div class="nf-icon _nf-icon-s-ans"></div>
                                        <div class="nf-p">Short Answer</div>
                                      </div>
                                    </div>  
                                    
                                    <div class="nf-li">
                                      <div class="nf-opt _nf-para" data-value="nf-para">
                                        <div class="nf-icon _nf-icon-para"></div>
                                        <div class="nf-p">Paragraph</div>
                                      </div>
                                    </div>
                                    <hr>
                                    <div class="nf-li">
                                      <div class="nf-opt _nf-multi-choice" data-value="nf-multi">
                                        <div class="nf-icon _nf-icon-mchoice"></div>
                                        <div class="nf-p">Multiple Choice</div>
                                      </div>
                                    </div>
                                    
                                    <div class="nf-li">
                                      <div class="nf-opt _nf-checkbox" data-value="nf-check">
                                        <div class="nf-icon _nf-icon-checkbox"></div>
                                        <div class="nf-p">CheckBoxes</div>
                                      </div>
                                    </div>

                                    <hr>                                    
                                 
                                    <div class="nf-li">
                                      <div class="nf-opt _nf-date" data-value="nf-date">
                                        <div class="nf-icon _nf-icon-date"></div>
                                        <div class="nf-p">Date</div>
                                      </div>
                                    </div>
                                    
                                    <div class="nf-li">
                                      <div class="nf-opt _nf-time" data-value="nf-time">
                                        <div class="nf-icon _nf-icon-time"></div>
                                        <div class="nf-p">Time</div>
                                      </div>
                                    </div>      
                                  </div>
                                </div>
                              </div>

The code works just fine. However, I'm thinking if there is a way to shorten this kind of jQuery code.

James Z
  • 12,209
  • 10
  • 24
  • 44
CoreTM
  • 195
  • 7
  • Use [event delegation](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners. E.g., use an [event argument](//developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). See the `selector` argument of jQuery’s [`.on`](//api.jquery.com/on/). – Sebastian Simon Jun 19 '21 at 03:38

2 Answers2

0

If you put the toggleable elements (that get shown or hidden) in order, you can iterate over the clickable .nf-lis and use the clicked index to identify which toggleable section to show, and hide the rest.

Your toggleable sections are already in order except for the .nf-main-c - all you need to do in the HTML is move that to the end so it comes last with the .data-c > div selector.

const toggleableDivs = $('.data-c > div');

$('.nf-li').each(function(i) {
  $(this).on('click', () => {
    toggleableDivs.addClass('nf-hide');
    toggleableDivs.eq(i).removeClass('nf-hide');
  });
});
.nf-hide {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
  <div class="col col-12 margin-top-10 nf-short-desc">
    <div class="nf-short-desc-c">
      <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
      <span></span>
    </div>
  </div>

  <div class="col col-12 margin-top-10 nf-para-c nf-hide">
    <div class="nf-para-input">
      <input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
      <span></span>
    </div>
  </div>

  <div class="col col-12 margin-top-10 nf-date-c nf-hide">
    <div class="nf-date-input">
      <input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
      <span></span>
    </div>
  </div>

  <div class="col col-12 margin-top-10 nf-time-c nf-hide">
    <div class="nf-time-input">
      <input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
      <span></span>
    </div>
  </div>
  
  <div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
    <div class="rdo-wrapper fullwidth" id="opt_1">
      <input id="rdo8" type="radio" name="sample4" class="rdo">
      <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
        <div class="col col-12">
          <div class="nf-opt-c">
            <div class="nf-input-opt">
              <input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
              <span></span>
            </div>
            <div class="nf-aImage-c">
              <div class="nf-opt-icon _nf-aImage-opt"></div>
            </div>
            <div class="nf-close-c">
              <div class="nf-opt-icon _nf-close-opt"></div>
            </div>
          </div>
        </div>
      </label>
    </div>
  </div>
</div>

<div class="nf-dropdown">
  <div class="nf-select-c">

    <div class="nf-default-opt">
      <div class="nf-li">
        <div class="nf-opt" data-value="nf-multi">
          <div class="nf-icon _nf-icon-chk"></div>
          <div class="nf-p">Multiple Choice</div>
        </div>
      </div>
    </div>

    <div class="nf-opt-ul">

      <div class="nf-li">
        <div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
          <div class="nf-icon _nf-icon-s-ans"></div>
          <div class="nf-p">Short Answer</div>
        </div>
      </div>

      <div class="nf-li">
        <div class="nf-opt _nf-para" data-value="nf-para">
          <div class="nf-icon _nf-icon-para"></div>
          <div class="nf-p">Paragraph</div>
        </div>
      </div>
      <hr>
      <div class="nf-li">
        <div class="nf-opt _nf-multi-choice" data-value="nf-multi">
          <div class="nf-icon _nf-icon-mchoice"></div>
          <div class="nf-p">Multiple Choice</div>
        </div>
      </div>

      <div class="nf-li">
        <div class="nf-opt _nf-checkbox" data-value="nf-check">
          <div class="nf-icon _nf-icon-checkbox"></div>
          <div class="nf-p">CheckBoxes</div>
        </div>
      </div>

      <hr>

      <div class="nf-li">
        <div class="nf-opt _nf-date" data-value="nf-date">
          <div class="nf-icon _nf-icon-date"></div>
          <div class="nf-p">Date</div>
        </div>
      </div>

      <div class="nf-li">
        <div class="nf-opt _nf-time" data-value="nf-time">
          <div class="nf-icon _nf-icon-time"></div>
          <div class="nf-p">Time</div>
        </div>
      </div>
    </div>
  </div>
</div>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
0

Rather than giving the containers a unique class, such as .nf-date-c, you can give them all a common class, like .nf-container, then use that as the selector. Since you're already storing which container the option relates to in it's data-value, you can use that to select the corresponding container.

<div class="col col-12 margin-top-10 nf-date nf-container">


$('.nf-opt').on('click', function(){
  $('.nf-container').addClass('nf-hide'); //hide everything

  $('.nf-container.' + this.getAttribute('data-value'))
    .removeClass('nf-hide'); //unhide the clicked option
});
PoorlyWrittenCode
  • 1,003
  • 1
  • 7
  • 10