Animate other elements with same class, but not this element

Question

I have a set of info cards that when you click "more information" a hidden panel will slide up, and when you click "close" or "watch now" it will close it.

I can get the individual cards to act how I need, but I've been trying to figure out how to find the other panels with the same class name, and if those are still open, then close them when I click "more information" on any other panel, without closing the current element I'm interacting with.

Essentially, close all other panels if they're open when I click the "more info" button, but don't close this panel.

Any ideas?

Full example: https://codepen.io/otajnorthrup/pen/PRjPpB

var min = '0px', max = '460px';
$(function () {
  $('.course').find('.more-info').click(function () {

    //when clicking the "more information" link, how do I close any/all other ".course-description.full" elements that are showing?

    if ($(this).parent().next('.course-description.full').css('top') == max) {
      $(this).parent().next('.course-description.full').animate({ top: min }, 250);             
    }
  });
  $('.course-description.full').find('.close-description, .watch-now').click(function () {
    if ($(this).parents('.course-description.full').css('top') == min) {
      $(this).parents('.course-description.full').animate({ top: max }, 250);
    }
  });
});

Answer 1

You can use the index of the block and :not(:nth-child(...)) CSS pseudo-classes to select the other blocks:

var $block = $(this).parents('.block');
var index = $block.index();

$('.block:not(:nth-child(' + index + '))')
  .find('.course-description.full').animate({ top: max }, 250);

Find the forked pen here: https://codepen.io/Aljullu/pen/rdwjgW

But as the others have commented, it might be better to refactor the code to use CSS for the animations instead of jQuery.

Answer 2

According to you code, you can just reuse the 'close' command and close any opened description, then you open the clicked one:

var min = '0px', max = '460px';
$(function () {
  $('.course').find('.more-info').click(function () {

    $('.course-description.full').animate({ top: max }, 250); //ADD THIS LINE
    if ($(this).parent().next('.course-description.full').css('top') == max) {
      $(this).parent().next('.course-description.full').animate({ top: min }, 250);             
    }
  });
  $('.course-description.full').find('.close-description, .watch-now').click(function () {
    if ($(this).parents('.course-description.full').css('top') == min) {
      $(this).parents('.course-description.full').animate({ top: max }, 250);
    }
  });
});

Answer 3

Add an id to each "more information" tag:

<a id='info_1' class="more-info">More Information</a>

<a id='info_2' class="more-info">More Information</a>

<a id='info_3' class="more-info">More Information</a>

Then compare your clicked_id to the id being looped through on click:

$('.course').find('.more-info').click(function () {
      clicked_id = $(this).attr('id')
      $('.more-info').each(function() {
      if($(this).attr('id') != clicked_id) {
      alert($(this).attr('id'))
      }
      })

This will alert all ids other than the one you clicked . Thus you can run your close code on those ids.