hide expand collapse row text after it's been pressed

[alasdair17]

hey, is there a way to hide the expand collapse row text after it's been clicked?

Link here: https://katie.alasdairdimmick.com/the-path/

I'd like the 'continue reading' text to vanish after it's been clicked.

I tried asking chatgpt and this was the result:

<script>
jQuery(document).ready(function($) {
// Target the "Continue reading" link
$('.expand-link-clicked').on('click', function() {
// Hide the link when clicked
$(this).fadeOut();
});
});
</script>

I tried changing the $ to jQuery too but didn't work either.

Thanks.

[alasdair17]

I managed to get it working. If anyone is interested here is the code from chatgpt:

<script>
  jQuery(function($) {
    // Function to initialize the expand/collapse functionality
    function initExpandCollapse() {
      // Monitor changes to the "Continue reading" link
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          // Check if the class "expand-link-clicked" is added to the link
          if (mutation.type === 'attributes' && $(mutation.target).hasClass('expand-link-clicked')) {
            // Once class is added, fade out the link with a small delay
            $(mutation.target).fadeOut(300);  // Add a duration here for smoother fade-out
          }
        });
      });

      // Select the "Continue reading" link
      $('a[href="#expandrow"]').each(function() {
        // Start observing for changes to the link's attributes (class)
        observer.observe(this, {
          attributes: true  // We are only interested in changes to the link's class
        });
      });

      // Add click event to the "Continue reading" link
      $('a[href="#expandrow"]').on('click', function(e) {
        e.preventDefault();  // Prevent default link action

        var targetRow = $($(this).attr('href'));  // Get the target element for expansion
        if (targetRow.length) {
          // Trigger the expansion smoothly with animation timing
          targetRow.animate({ height: 'auto' }, 400);  // Expand smoothly
          targetRow.trigger('click');  // Trigger the expansion of the target row
        }
      });
    }

    // Initialize the function when the page is loaded or revisited
    initExpandCollapse();  // Initialize the functionality when the page first loads

    // Use a simple interval check to make sure the functionality works after navigation
    setInterval(function() {
      // Make sure the "Continue reading" functionality is re-bound even after navigating between pages
      initExpandCollapse();
    }, 500);  // Check every 500ms if it's necessary
  });
</script>

[arminunruh]

instead of:

    // Use a simple interval check to make sure the functionality works after navigation
    setInterval(function() {
      // Make sure the "Continue reading" functionality is re-bound even after navigating between pages
      initExpandCollapse();
    }, 500);  // Check every 500ms if it's necessary

you can do

    // make sure the functionality works after navigation
    window.laytheme.on('newpageshown', function(){
      // Make sure the "Continue reading" functionality is re-bound even after navigating between pages
      initExpandCollapse();
    })

[alasdair17]

@arminunruh nice, thanks!