jQueryのaddClass指定したクラスは何者？？

直接的な回答をしない理由

まず、「$answer.addClass('open') が何のためにあるのか」を一から十まで筋道立てて説明する事は可能です。
しかし、そうした場合、質問者さんは回答にある考えの流れをなぞって答えを出すことになり、「自分の頭で真に理解した」とはいえないだろうと考えています。

「自分の頭で真に理解した」というのは、回答にある文章を全て忘れて、一から自分の言葉で全てを説明できる状態の事です。
これが出来る人は、回答で構成されている中核となる要素を分解して自分の頭で考えを再構築し、自分の言葉で説明しなおすという作業をしています。
経験上、そういう方の質問は「このコードはこういう動きをしており、こうなるはずなのですが、なぜかこうなってしまいます」のように自分の考えを添えながら、「自分の考えから想定される結果」と「事実上の結果」に相違がある部分を質問します。
「わからない部分」がより明確で具体的です。

残念ながら、質問者さんはそうした質問ではない為、一から十まで説明するのはかえって理解から遠ざかると考えています。

ヒント

というわけで、考え方のヒントだけを出します。

• 1回目のクリック時の動きはどうなっているか
• 2回目のクリック時の動きはどうなっているか
• 1回目/2回目の動きが異なる場合、どうやってその違いを認識しているか

基本的にはコードの動きをなぞるだけではダメで、設計者の気持ちになって、「この機能をどうやって実装しようか」という観点に立つのが重要と思います。

車輪の再発明

「設計者の気持ちになってみる」という観点では、一から自分で作り直してみるのも有効です。
一般に車輪の再発明はプログラミングでは敬遠される行為ですが、再発明する事で原理をよく理解できるようになります。

• 車輪の再発明 - Wikipedia

※余談ですが、「もっと良い実装があるのに…」と思ってしまう問題なので、別の実装法を考えてみるのも面白いと思います。
おそらく、Progate出題者はjQuery APIを熟知していません(APIを知っていれば、jQueryを使用していながら、独自コードに頼らない部分があります)。

Re: muchitaro さん

①

論理的・・・で言うとコードをそのまま文章化しただけのものはあまり有用とは言えません。
大目的部分がどうなっているか→それを実現するための処理　と考えた方が良いでしょう。
同じ目的のことを実現するやり方は１つではないという観点から、「合ってるか」という質問であればここはお答えしかねます。
むしろ「同じ目的を別のやり方で実現するとしたらどうなるか」を考えた方がロジカルと言えるでしょう。

②

CSSにないからとそのクラス名をつけられないわけではないので「何者か」と言うと
「付け外しされているだけのクラス」としか表現しようがないと思います。
何のためか？というと今回提示された内容だけでは判断が不可能です。
オンライン学習使ったことはないですが章立てで進んでいるものなんでしょうし
今後何かで使う機会もあるかもしれませんね。

ほぼほぼ同じようなところをやっていそうな質問があるので参考にされてみてはと。

ここで出てくる、　open は一体何者なんですか？

openしてるかどうかの判断に使いたかっただけだから、$answer.attrで取得しても良いし、addClassじゃなくてattrやdataを使っても良い
hasClassって書いてあるのが読みやすい（と思ったから）使ってるんだろうけど、勉強する立場からしたらattrとかで書いてくれてる方が理解しやすいだろうと思う

おす、おら、goku。

おめぇは「なんでopenクラスを付けたり外したりしてるのか全くわかんねぇぞ」って言ってるみてぇだが、
それは、すげぇ簡単な事だぞ。

openクラスはプログラミングで昔から使われている「フラグ」の代わりだぞ。

例えば、アコーディオンが１つだけだったとするだろ？
その場合は、すっげぇ簡単に書くとこうなる。

$(function()
{
  var answer_opened = false;    // ←アコーディオン開閉フラグ

  $('.faq-list-item').click(function()
  {
    var $answer = $(this).find('.answer');

    if (answer_opened === true)  // アコーディオンが開いていたら
    {
      $answer.slideUp();         // アコーディオンを閉じて
      $(this).find("span").text("+");
      answer_opened = false;     // 開閉フラグを下げる
    }
    else    // 開いて無かったら
    {
      $answer.slideDown();       // アコーディオンを開いて
      $(this).find("span").text("-");
      answer_opened = true;     // フラグを立てる
    }
  });
});

だけんど、アコーディオンは沢山あんだろ？　そしたらおめぇ、開閉フラグはその数だけ作んなくちゃ行けねぇ。
管理も大変になってくる。おら、そんなめんどくせぇ事はしたくねぇ。

だからな、フラグをDOM要素そのものに埋め込んじまおうってのが、その「open」だ。

openクラスが無いアコーディオンは閉じているアコーディオンだから、クリックされたら開く動作をさせる、
openクラスがあるアコーディオンは開いているアコーディオンだから、クリックされたら閉じる動作をさせるってぇわけだ。おもしれぇだろ？　おら、わっくわくすっぞ。

質問のサンプルは結構めぇから使われてるやり方だが
最近はclassに埋め込むよりも、HTML5で実装されたカスタムデータ属性を使って

$(selector).attr("data-opened", true);

ってやった方がいいと思うぞ。

ただ、openってクラス名はダメだと思うぞ。既に開いている状態を示すフラグなんだから、過去形にしねぇとな。
Progate の奴らはまともな命名も出来ねぇらしいな。修行が足んねぇぞ。

おらの説明はこんな感じだ。chi-chiが晩飯のオカズ狩って来いってうるせぇからそろそろで行ってくっぞ。
おめぇももっと修行して天下一武道会でおらと握手だ。

他の質問サイトでの回答が一番わかりやすかった為、一応自己解決とします。
ちなみにその回答が下記です↓　（こう言う回答が欲しかった）

アコーディオンメニューのコーディングに関して、回答します。

①は、概ね合っています。

var $answer = $(this).find('.answer');

＞$answerには、クリックした際にそのクリックイベントが起こった要素で、
その子要素の.answerを代入。

変数「 $answer」は、
「faq-list-item」クラス属性が付いた要素の配下における
「answer」クラス属性のHTMLコレクションです。

②の「 open は一体何者なんですか？」
また、
「この open は具体的に「何」でどう作用しているのでしょうか？」
について

テクニカルタームとしては、「フラグを立てる」という作業です。

具体的に言い換えると、
マラソンで折り返し地点に到達した時に、
「このランナーはここまで来たんだ」ということで、
マジックペンで手に色を付けられます。

何かの目印を付けないと、
折り返し地点に到達していないのに
引き返されても、まったくわかりませんからね。

それと同様のことをしている訳です。

HTMLのタグには、いろいろな属性が付けられます。

このアコーディオンメニューの場合は、
質問という「question」クラスの付いたH3タグをクリックしたら、
・その直下のSPANタグ内の記号を変える
・かつ、「answer」クラスの付いたDIVタグの表示属性を変える

そういう処理をしている訳ですね。

その際、H3タグのクリック時に、
回答のタグが開いているのか、閉じているのかわかりません。
そこで「open」というクラスを用意しています。

・そのクラス属性が在るなら、閉じる
その時は、「open」クラスを取ってしまう

・そのクラス属性が無いなら、開く。
開けた目印として、
「開けましたよ」という意味付けの「open」クラスを付けておく

そうした処理をしていることになります。

＞試しにopenを適当な文字に置き換えても出来た

そうです。どんな文字でもいいんです。

ただ、モノを開けたら「オープン」と言うので、
便宜的に「open」という単語を使っているだけです。