Display or conceal the location where the click event occurs within a single div

Question

Display or conceal the location where the click event occurs within a single div

$(".button-toggle").click(function(e){
  $(this).parents.find('#second').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <a href="#" class="buttong-toggle">
    <button>Show/Hide</button>
  </a>
</div>
    
<div id="second">
  larger section
</div>

It's clear from the demonstration in the fiddle that this script is not functioning as intended. I am currently trying to resolve the issue of DOM traversal when using 'this' event, which seems unable to locate the #second ID.

javascript jquery html css

Answer 1

Answer №1

The accurate solution: https://jsfiddle.net/orttv29j/

Corrections:

Ensure the class name inside your anchor tag is "button-toggle" and not "buttong".

When targeting another class or id, make sure to use that specific class or id name instead of using "this". The term 'this' refers to the handler used to trigger the function, in this scenario, it's 'button'.

(You do not need to know the exact location of the target element whether it's within the same parent container or elsewhere, JavaScript handles this automatically by recognizing their id or class name as provided in the toggle function)

$(".button-toggle").click(function(e){
  $("#second").toggle();
});

#first{
  background-color: dodgerblue;
  min-height: 100px;
  margin: 20px;
}
#second{
  background-color: gray;  
  min-height: 200px;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <a href="#" class="button-toggle">
    <button>Click</button>
  </a>
</div>

<div id="second">
  larger section
</div>

Answer 2

The accurate solution: https://jsfiddle.net/orttv29j/

Corrections:

Ensure the class name inside your anchor tag is "button-toggle" and not "buttong".

When targeting another class or id, make sure to use that specific class or id name instead of using "this". The term 'this' refers to the handler used to trigger the function, in this scenario, it's 'button'.

(You do not need to know the exact location of the target element whether it's within the same parent container or elsewhere, JavaScript handles this automatically by recognizing their id or class name as provided in the toggle function)

$(".button-toggle").click(function(e){
  $("#second").toggle();
});

#first{
  background-color: dodgerblue;
  min-height: 100px;
  margin: 20px;
}
#second{
  background-color: gray;  
  min-height: 200px;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <a href="#" class="button-toggle">
    <button>Click</button>
  </a>
</div>

<div id="second">
  larger section
</div>

Answer 3

Answer №2

Check out these info updates - class name : 'buttong-toggle' should actually be 'button-toggle' $(this).parents - function alone won't provide the expected output; use $(this).parents() instead, which is an object See the changes made below.

$(".button-toggle").click(function(e){
  $(this).parents().find('#second').toggle();    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<div id="first">
  <a href="#" class="button-toggle">
    <button>Show/Hide</button>
  </a>
</div>

<div id="second">
  larger section
</div>

Answer 4

Check out these info updates - class name : 'buttong-toggle' should actually be 'button-toggle' $(this).parents - function alone won't provide the expected output; use $(this).parents() instead, which is an object See the changes made below.

$(".button-toggle").click(function(e){
  $(this).parents().find('#second').toggle();    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<div id="first">
  <a href="#" class="button-toggle">
    <button>Show/Hide</button>
  </a>
</div>

<div id="second">
  larger section
</div>

Display or conceal the location where the click event occurs within a single div

Answer №1

Answer №2

Similar questions

Troubleshooting: Issues with jQuery Validate plugin's rules method in Javascript

Model with no collection involved

Geoserver does not have the 'Access-Control-Allow-Origin' header

The expandable row remains open even after filtering the table with JavaScript

Exploring the world of technology with jQuery, harnessing the power of JSON objects

Menu Drop on top of Flash player

Adding static files to your HTML page with node.js

What is the best way to set the date defaultValue to be empty?

Close FaceBox programmatically

Issues have been encountered with the functionality of $rootScope

Troubling inconsistency in jQuery's .css function performance

jQuery causing issues with CORS configurations

Angular 1.5 component using HTTP GET

Evaluating the conditional rendering of a React child component using Jest and Enzyme

Having trouble converting the signup form to PDO from MySQLI, encountering a DATABASE error

Issue with Internet Explorer: Refusing to run javascript included in AJAX-loaded content

What is the reason for the incompatibility between $.ajaxSetup and $.post methods

What is the best way to present retrieved JSON data from a database in Node.js without using the JSON format?

Set the mesh position in Three.js to the coordinates 0,0,0

Is there a way to eliminate the scrollbar from the purecss navbar?