Using JQuery to trigger a click event only when a specific character appears in a paragraph

Question

I have an accordion with some text marked "Important". I want the page to automatically open pages marked "Important" by clicking a button toggle when the page loads.

I've used $(".diff__filename:contains('sections/')")) to search for the word "Important" in the title, but I don't know how to tell it to click the button next to it .

I chose to use JQuery to avoid looping through class names.

<p class="title">
  Important: Content 1
  <button class="toggle">Open</button>
</p>
<p class="title">
  Content 2
  <button class="toggle">Open</button>
</p>
<p class="title">
  Content 3
  <button class="toggle">Open</button>
</p>
<p class="title">
  Important: Content 4
  <button class="toggle">Open</button>
</p>

Answer 1

You can use :contains on an element and then trigger a click:

$('document').ready(function() {

  $('button').click(function() {
    let name = $(this).data('name');
    console.log('click on:', name);
  });

  $('div p:contains("Important")').find('button').trigger('click');

});

sssccc


  Important: Content 1
  Open


  Content 2
  Open


  Content 3
  Open


  Important: Content 4
  Open

Load output:

click on: Button 1
click on: Button 4