Question 195218 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I have a jquery toggle function that hides and shows a p tag. When there are multiple tags, I just want it to toggle the specific one the user clicks

I have a jquery function that toggles a hide and show for a p tag. in my HTML, it brings multiple different store.IDs in the results. There are specific p tags in the search for each store ID and I just want it to show/hide the specific one the user clicks. When I run this, all the p tags for all the stores showing toggle hide and show, not the specific one the user clicks. Is there a way to make it specific to the users click?

HTML:

<div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details
    </a>
    <p class="${store.ID} test"></p>
</div>

JS:

$('.test').toggle();

The user will get multiple store IDs results. They should be able to toggle the "Details" button on the specific store ID they click, not all the "Details" that get shown.

Tags:

2

Answers


  1. 0

    The id of each element is irrelevant here. ID’s should be avoided whenever possible because their use creates brittle code that doesn’t scale well. Instead, get referenced to elements in a more relative way. That is, find your elements based on where in the DOM structure something is located.

    See comments inline.

    // Set up one event handler that is an ancestor of all the possibly clicked elements
// and let the event bubble up to it from whichever element within 
// it that was clicked.
document.getElementById("wrapper").addEventListener("click", function(event){
  event.preventDefault();
  
  // Check to see if the event was triggered by an element we care to handle.
  if(event.target.classList.contains("store-detail-link")){
    // Reference the <p> that comes after the clicked <a>
    $(event.target).next("p").toggle();
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 1
    </a>
    <p class="${store.ID} test">Show/Hide 1</p>
  </div>
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 2
    </a>
    <p class="${store.ID} test">Show/Hide 2</p>
  </div>
  <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details 3
    </a>
    <p class="${store.ID} test">Show/Hide 3</p>
  </div>  
</div>
    Login or Signup to reply.
  2. 0

    To make the toggle functionality specific to the user’s click on the store-detail-link element, you need to modify your jQuery code. Here’s an updated version that should achieve the desired behavior:

    $('.store-detail-link').click(function(e) {
    e.preventDefault(); // Prevent the default link behavior

    var $target = $(this).next('.test'); // Find the corresponding p tag

    $target.toggle(); // Toggle the visibility of the p tag
});
    <div>
    <a class="store-detail-link" href="${URLUtils.url('Stores-Details', 'storeID', store.ID)}">
        Details
    </a>
    <p class="${store.ID} test"></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search