Tengo una función que, al hacer clic en un enlace con la clase .show-more, abre el div con la clase .productinfo. Ahora, también agrega una clase al enlace en sí (.active); el problema que tengo es que tengo algunos enlaces en esta página con la misma clase. Logré abrir solo el .productinfo correcto al hacer clic en él, pero la clase se agregará a cada enlace, no obstante. También intenté agregar lo siguiente al código, pero eso no funcionó:

 $(this).find('show-more').toggleClass("active");

Mi estructura es la siguiente:

 <div class="main-content"> <div class="col-1">Content 1</div> <div class="col-2">Content 2</div> <div class="col-3"><a class="show-more">Show more</a></div> <div class="productinfo">This content is hidden and will be shown when clicked</div> </div> <div class="main-content"> <div class="col-1">Content 1</div> <div class="col-2">Content 2</div> <div class="col-3"><a class="show-more">Show more</a></div> <div class="productinfo">This content is hidden and will be shown when clicked</div> </div>

jQuery(documento).ready(función($) {

 $('body').on('click', 'a.show-more', function(e) { e.preventDefault(); $('.show-more').toggleClass("active"); var $this = $(this).parents('.product'); $this.find('.productinfo').toggle(0, 'slide')

});

});