Is it possible to target an HTML elementID after executing a JQuery Hide/Show DIV layer?

Question

On click of a button, I'm hiding one div and showing the other. However when the new div shows the window location goes to that div moving the user experience from the buttons to the div. In the below, I am trying to target the elementID on the page to force the window location to remain/move back to the top.

Is this possible or will the shown div always take precedence?

$(function(){
  $("#ccw").hide();  
    $("#ccwcatalog").click(function(){
        $("[name='k9course']").hide();
        $("[name='ccwcourse']").show();
        $("a#top").focus()
  });
});

Working example, yes but only locally it isn't on an online host yet. As for I guess mwe - here's it in codepen. https://codepen.io/Nerdfather/pen/ZEGYWzG — Nrrrdfather, Feb 07 '20 at 17:30
Instead of going down/showing/hiding to the category I am trying to initiate a refocus of the window to stay at the same area or move back to the top. — Nrrrdfather, Feb 07 '20 at 17:31
The [mcve] has to be part of the question itself and not only a link to an external resource hidden in a comment. — Andreas, Feb 08 '20 at 10:55

score 1 · Accepted Answer · answered Feb 07 '20 at 17:57

Your "buttons" k9 and ccw are anchor tags with a href of #k9 and #ccw - which means it will append that hash to the end of the current URL.

When the hash (#) is present on the end of a URL the browser will link to the element that it matches on the page (in this case the div with id k9 or the div with id ccw. You can read How do I link to part of a page? (hash?) for more info.

To fix this you can just convert your <a></a> tags in your nav to <button></button> tags so it won't link to the div below when pressed.

Some advice:

When you said you were trying to "force the window location to remain/move back to the top.", you were trying to fix something that shouldn't of happened in the first place, next time try to take a step back and see if its preventable in the first place.

$(function() {
  $("#ccw").hide();
  $("#ccwcatalog").click(function() {
    $("[name='k9course']").hide();
    $("[name='ccwcourse']").show();
    $("a#logotop").focus()
  });
});

$(function() {
  $("#k9catalog").click(function() {
    $("[name='ccwcourse']").hide();
    $("[name='k9course']").show();
    $("a#logotop").focus()
  });
});

.col-lg-3,
.col-md-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px
}

#course-nav {
  align-items: center;
  justify-content: center;
}

.single-classes-item {
  background: #003d76;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 32px;
}

.course-btn {
  display: inline-block;
  font-size: 18.5px;
  font-weight: 500;
  padding: 32px 50px 32px 50px;
  color: #ffffff;
  background: #003d76;
  letter-spacing: 0.5px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classes-section spad" id="courses" name="courses">
  <div class="container">
    <div id="course-nav" class="row">
      <div class="col-lg-3 col-md-6">
        <div>
          <h2><button id="k9catalog" class="course-btn">K-9 Class Catalog</button></h2>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div>
          <h2><button id="ccwcatalog" class="course-btn">CCW Class Catalog</button></h2>
        </div>
      </div>
    </div>
    <div id="ccw" class="row" name="ccwcourse">
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Intro to Fire arms</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Second Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Third Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Fourth Class</h4>
        </div>
      </div>
    </div>

    <div id="k9" class="row" name="k9course">
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>K9 Class one</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Second Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Third Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Fourth Class</h4>
        </div>
      </div>
    </div>
  </div>
</div>

Thank you! I figured it was something stupidly simple and I was just not seeing or thinking of it. The to — Nrrrdfather, Feb 07 '20 at 18:03

Is it possible to target an HTML elementID after executing a JQuery Hide/Show DIV layer?

1 Answers1