When the HTML content matches a specific value, initiate a click event to trigger

Question

When the HTML content matches a specific value, initiate a click event to trigger

Can anyone help me troubleshoot? I've tried multiple methods but can't seem to get it right. Here's a breakdown of what I'm attempting to accomplish:

#info-NUMBER-btn shows

Click to display more information

.
#info-NUMBER CSS is set to display: none.

When #info-NUMBER-btn is clicked:
- The corresponding #info-NUMBER-btn changes to

Click to display less information

.
- The corresponding #info-NUMBER CSS is set to display: inline-block.

/* Jquery */

$(document).ready(function() {
    $("#info-1-btn").text("Click to display more information");
    $("#info-2-btn").text("Click to display more information");
    $("#info-3-btn").text("Click to display more information");
    $("#info-4-btn").text("Click to display more information");
    $("#info-5-btn").text("Click to display more information");
    
    if($("#info-1-btn").text("Click to display more information")) {
    $("#info-1-btn").click(function () {
    $(this).text("Click to display less information");
    $("#info-1").css("display", "inline-block");
    });
    } else if($("#info-1").text("Click to display less information")) {
    $("#info-1-btn").click(function() {
    $(this).text("Click to display more information");
    $("#info-1").css("display", "none");
    });
    }
    
    
    if($("#info-2-btn").text("Click to display more information")) {
    $("#info-2-btn").click(function () {
    $(this).text("Click to display less information");
    $("#info-2").css("display", "inline-block");
    });
    } else {
    $("#info-2-btn").click(function() {
    $(this).text("Click to display more information");
    $("#info-2").css("display", "none");
    });
    }
    
    
    if($("#info-5-btn").text("Click to display more information")) {
    $("#info-5-btn").click(function () {
    $(this).text("Click to display less information");
    $("#info-5").css("display", "inline-block");
    });
    } else {
    $("#info-5-btn").click(function() {
    $(this).text("Click to display more information");
    $("#info-5").css("display", "none");
    });
    }
    });

<!-- HTML -->
<div id="info-5" class="hire-equipment-more-information">
  <table class="hire-equipment-more-information-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a id="info-5-btn" class="hire-equipment-item-link"></a>

javascript jquery html css

Answer 1

Answer №1

To simplify the process, consider binding to the class hire-equipment instead of individual element id's.

This way, you can avoid binding to multiple buttons that perform the same action.

Upon triggering the eventHandler, you can use the function's first argument to determine which button was clicked and proceed accordingly.

For instance, you can create the elements and set up a single event handler.

Using $(selector).click() will bind to all elements with the selector (hire-equipment in this case). Then, it will identify the originating button, locate the parent node (containing the button, title, and description), find the description element, and toggle its hidden class. The button's text will change based on its current state.

While not identical to your setup, this is a demonstration of how to make your event handlers more universal.

$('.hire-equipment').click(function(event) {
  var sourceElement = $(event.target);
  $(sourceElement).parent().find('.description').toggleClass('hidden');
  if ($(sourceElement).text() === 'Show more information') {
    $(sourceElement).text('Show less information');
  } else {
    $(sourceElement).text('Show more information');
  }
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>

Answer 2

To simplify the process, consider binding to the class hire-equipment instead of individual element id's.

This way, you can avoid binding to multiple buttons that perform the same action.

Upon triggering the eventHandler, you can use the function's first argument to determine which button was clicked and proceed accordingly.

For instance, you can create the elements and set up a single event handler.

Using $(selector).click() will bind to all elements with the selector (hire-equipment in this case). Then, it will identify the originating button, locate the parent node (containing the button, title, and description), find the description element, and toggle its hidden class. The button's text will change based on its current state.

While not identical to your setup, this is a demonstration of how to make your event handlers more universal.

$('.hire-equipment').click(function(event) {
  var sourceElement = $(event.target);
  $(sourceElement).parent().find('.description').toggleClass('hidden');
  if ($(sourceElement).text() === 'Show more information') {
    $(sourceElement).text('Show less information');
  } else {
    $(sourceElement).text('Show more information');
  }
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>

Answer 3

Answer №2

Let's investigate this line of coding

if($("#info-1-btn").text("Click to view more details")) {

It should be revised to:

if($("#info-1-btn").text() === "Click to view more details")) {

The text function serves multiple purposes. If no value is passed, it returns the text within the element.

When a value is passed, it alters the text and returns the jQuery object again (which will be evaluated as a truthy value).

Now let's review your overall logic.

Your code evaluates the button's status only once, upon document load. It should instead evaluate the button's status within the click handler.

Refer to this complete example: http://plnkr.co/edit/Qr4LtPhYZ9AqV6t55qXd?p=preview

While it may not align precisely with your requirements, it showcases how to check the button's state within a click handler.

Additionally, it illustrates the use of a custom attribute (in this instance, data-target) to connect a button to a div block.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>

<body>
  <button class="toggleButton" data-target="buttonOneInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonOneInfo">
    Here's some information about the first item
  </div>
  <button class="toggleButton" data-target="buttonTwoInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonTwoInfo">
    Here's some information about the second item
  </div>
  <button class="toggleButton" data-target="buttonThreeInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonThreeInfo">
    Here's some information about the third item
  </div>


</body>

<script type="text/javascript">
  $(function() {
    $('.toggleTarget').hide();
    $(".toggleButton")
      .text("Click to view more details")
      .click(function() {
        var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));

        if ($(this).text() === 'Click to view more details') {
          $(this).text('Click to view less details');
          toggleTarget.show();
        } else {
          $(this).text('Click to view more details');
          toggleTarget.hide();
        }
      });
  });
</script>

</html>

Answer 4

Let's investigate this line of coding

if($("#info-1-btn").text("Click to view more details")) {

It should be revised to:

if($("#info-1-btn").text() === "Click to view more details")) {

The text function serves multiple purposes. If no value is passed, it returns the text within the element.

When a value is passed, it alters the text and returns the jQuery object again (which will be evaluated as a truthy value).

Now let's review your overall logic.

Your code evaluates the button's status only once, upon document load. It should instead evaluate the button's status within the click handler.

Refer to this complete example: http://plnkr.co/edit/Qr4LtPhYZ9AqV6t55qXd?p=preview

While it may not align precisely with your requirements, it showcases how to check the button's state within a click handler.

Additionally, it illustrates the use of a custom attribute (in this instance, data-target) to connect a button to a div block.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>

<body>
  <button class="toggleButton" data-target="buttonOneInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonOneInfo">
    Here's some information about the first item
  </div>
  <button class="toggleButton" data-target="buttonTwoInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonTwoInfo">
    Here's some information about the second item
  </div>
  <button class="toggleButton" data-target="buttonThreeInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonThreeInfo">
    Here's some information about the third item
  </div>


</body>

<script type="text/javascript">
  $(function() {
    $('.toggleTarget').hide();
    $(".toggleButton")
      .text("Click to view more details")
      .click(function() {
        var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));

        if ($(this).text() === 'Click to view more details') {
          $(this).text('Click to view less details');
          toggleTarget.show();
        } else {
          $(this).text('Click to view more details');
          toggleTarget.hide();
        }
      });
  });
</script>

</html>

Answer 5

Answer №3

Streamlined OP's jQuery code by removing unnecessary elements. The process outlined below:

Mainly using the toggleClass() method
Requires at least 2 classes to indicate the state of .info-btn
The benefit of utilizing classes is the ability to add more styles to enhance the state of .info-btn such as color and background-color

For more detailed information, refer to the comments in the Snippet source below:

SNIPPET

/* jQuery */

// Alternative syntax for $(document).ready(
$(function() {

  // Click on ANY element with the class .info-btn
  $(".info-btn").on("click", function(e) {

    // Prevent .info-btn from jumping when clicked
    e.preventDefault();

    /* `this` or .info-btn will switch between the 
    | classes of .more and .less
    | Refer to CSS for behaviors in different states of
    | .info-btn
    */
    $(this).toggleClass('more less');
  });
});

.info-btn {
  cursor: pointer;
}
/* Both classes use the :after pseudo-selector
| The content value will complete the 
| string: "Click to display"...
*/

a.more:after {
  content: ' more information';
}
a.less:after {
  content: ' less information';
}
button.less:before {
  content: 'less ';
}
button.less:after {
  content: ' more';
}
button.more:before {
  content: 'more ';
}
button.more:after {
  content: ' less';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div id="info-5" class="rental-info">
  <table class="rental-info-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a class="info-btn rental-link more">Click to display</a>
<br/>
<button class='info-btn less'>is</button>
<br/>

Answer 6

Streamlined OP's jQuery code by removing unnecessary elements. The process outlined below:

Mainly using the toggleClass() method
Requires at least 2 classes to indicate the state of .info-btn
The benefit of utilizing classes is the ability to add more styles to enhance the state of .info-btn such as color and background-color

For more detailed information, refer to the comments in the Snippet source below:

SNIPPET

/* jQuery */

// Alternative syntax for $(document).ready(
$(function() {

  // Click on ANY element with the class .info-btn
  $(".info-btn").on("click", function(e) {

    // Prevent .info-btn from jumping when clicked
    e.preventDefault();

    /* `this` or .info-btn will switch between the 
    | classes of .more and .less
    | Refer to CSS for behaviors in different states of
    | .info-btn
    */
    $(this).toggleClass('more less');
  });
});

.info-btn {
  cursor: pointer;
}
/* Both classes use the :after pseudo-selector
| The content value will complete the 
| string: "Click to display"...
*/

a.more:after {
  content: ' more information';
}
a.less:after {
  content: ' less information';
}
button.less:before {
  content: 'less ';
}
button.less:after {
  content: ' more';
}
button.more:before {
  content: 'more ';
}
button.more:after {
  content: ' less';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div id="info-5" class="rental-info">
  <table class="rental-info-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a class="info-btn rental-link more">Click to display</a>
<br/>
<button class='info-btn less'>is</button>
<br/>

When the HTML content matches a specific value, initiate a click event to trigger

Answer №1

Answer №2

Answer №3

SNIPPET

Similar questions

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

Mistake in Timestamp Separation - JavaScript

exciting, showcasing a dependency map using svg within an html5 environment

What is causing the div to not update until the for loop is completed?

Challenges arising from the use of 'position: absolute' in managing relationships between grandparents, parents, and children

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

Function in nodejs throwing an error: Return type missing

"VueJs and ChartJs work together to create single file components, but the computed property is only rendered in Vue Dev Tools when the component is

What is the best way to choose an item from a list nested inside a div?

If the error state is true, MuiPhoneNumber component in react library will disable typing, preventing users from input

Convert the data received from jQuery $.parseJSON into HTML code

Auth0 encountering issues retrieving ID token and user metadata

Transforming CSS shorthand background properties into longhand representation

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

AngularJS Setting Default Values in HTML Pages

Gather information on a webpage

What are the steps for implementing CORS?

Utilize jQuery to insert a span element inside a paragraph element before it is appended to the DOM

Creating a vibrant and mesmerizing inward spiraling rainbow of colors on canvas using JavaScript