Javascript 按ID在单击时显示/隐藏内容

我习惯于使用Wordpress，但在本例中我使用的是不同的平台（Squarespace）。我需要能够显示内容点击，为这个网站的博客部分

示例：在新闻页面中，我有一个新闻项目列表，其中包含每篇文章的摘录。单击后，我想显示内容而不是摘录

我遇到的问题是，如果我点击，它会显示所有帖子的所有内容，而不仅仅是我点击的内容

我所做的过程是在我的博客列表页面上显示每个“文章摘录”和全部内容，我将全部内容隐藏起来，并用lightbox显示

这是我目前为止所做的，但它不起作用，什么也没有发生：

标记

{id}

将路径作为类提供-它在源代码中显示良好

有人有什么建议吗

到目前为止，我的代码如下（显示列表）：

`

{.end}
{.section categories}{.equal？collection.typeName“products”}找到{.or}{.end}{.repeated section@}{.alternates with}，{.end}{.end}
{.if类别&&tags}{.end}
{.passthrough？}
{或}

{addedOn |日期%B%e，%Y}

{.end}
{节选？}
{摘录}
{或}
{.section body}
{@}
{.end}
{.end}

{.comments？}
{.end}
{| like button}{| social button inline}


{.comments？}
{.end}

`

以及显示内容：

{.repeated section@}{.alternate为}，{.end}{.end}
{.passthrough？}
{或}
{.section sourceUrl}{.end}
{.end}

---

你可以选择

<div style='display:none'>
  <div class="lightbox" id="fl1">

 <div class="main-image-wrapper">
<img style="width:100%" {@|image-meta} />
  </div>


    <div class="entry-meta">
                {.section categories}<div><em>{.equal? collection.typeName "products"}Found{.or}{.end} </em> {.repeated section @}<a href="{collection.fullUrl}?category={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.if categories && tags} <em></em> {.end}

              </div>
<div id="all-content">

<div class="entry-title-wrapper">
  <h1 data-content-field="title" class="entry-title">
  {.passthrough?}
    <a href="{sourceUrl}" class="entry-title-passthrough" target="_blank">{title}</a>
  {.or}
   <p class="date">
    <time class="published" datetime="{addedOn|date %F}">{addedOn|date %B %e, %Y}</time>
  </p>
    <a class="lightbox" href="{fullUrl}">{title}</a>
  {.end}
  </h1>

</div>

</div>

<div class="entry-content lightbox">

  {.excerpt?}
    {excerpt}
   <span style="font-size:16px">        {.section body}
</span> 


      {@}
    {.end}
  {.end}
  <p class="entry-actions-simple">
    {.comments?}
      <a class="entry-comments" href="{fullUrl}#comments-outer-wrapper" title="Comments">
      {.if websiteSettings.disqusShortname}
        {@|comment-link}
      {.or}
      {.section publicCommentCount}
        {@} Comment{@|pluralize}
        {.or}
          Comment
        {.end}
      {.end}
      </a>
    {.end}
      {@|like-button}{@|social-button-inline}
     </p>
<header class="entry-header cf lightbox">

         {@|like-button}{@|social-button-inline}

 <div class="tag" style="float:right">
 {.section tags}<div><em><img style="width:20px;padding-right:10px" src="https://four23main.squarespace.com/assets/images/tag.png"></em> {.repeated section @}<a href="{collection.fullUrl}?tag={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.passthrough?}
                {.or}
                {.section sourceUrl}<div class="source-url"><a href="{sourceUrl}" target="_blank">Source</a></div>{.end}
                {.end}
                </dv>
</header>
</div>

---

这里是实际操作

你能为点击的按钮和显示的项目发布一个HTML示例吗？谢谢，我已经编辑了我的代码和问题：）

<div style='display:none'>
  <div class="lightbox" id="fl1">

 <div class="main-image-wrapper">
<img style="width:100%" {@|image-meta} />
  </div>


    <div class="entry-meta">
                {.section categories}<div><em>{.equal? collection.typeName "products"}Found{.or}{.end} </em> {.repeated section @}<a href="{collection.fullUrl}?category={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.if categories && tags} <em></em> {.end}

              </div>
<div id="all-content">

<div class="entry-title-wrapper">
  <h1 data-content-field="title" class="entry-title">
  {.passthrough?}
    <a href="{sourceUrl}" class="entry-title-passthrough" target="_blank">{title}</a>
  {.or}
   <p class="date">
    <time class="published" datetime="{addedOn|date %F}">{addedOn|date %B %e, %Y}</time>
  </p>
    <a class="lightbox" href="{fullUrl}">{title}</a>
  {.end}
  </h1>

</div>

</div>

<div class="entry-content lightbox">

  {.excerpt?}
    {excerpt}
   <span style="font-size:16px">        {.section body}
</span> 


      {@}
    {.end}
  {.end}
  <p class="entry-actions-simple">
    {.comments?}
      <a class="entry-comments" href="{fullUrl}#comments-outer-wrapper" title="Comments">
      {.if websiteSettings.disqusShortname}
        {@|comment-link}
      {.or}
      {.section publicCommentCount}
        {@} Comment{@|pluralize}
        {.or}
          Comment
        {.end}
      {.end}
      </a>
    {.end}
      {@|like-button}{@|social-button-inline}
     </p>
<header class="entry-header cf lightbox">

         {@|like-button}{@|social-button-inline}

 <div class="tag" style="float:right">
 {.section tags}<div><em><img style="width:20px;padding-right:10px" src="https://four23main.squarespace.com/assets/images/tag.png"></em> {.repeated section @}<a href="{collection.fullUrl}?tag={@|url-encode}" rel="tag">{@}</a>{.alternates with}, {.end}</div>{.end}
                {.passthrough?}
                {.or}
                {.section sourceUrl}<div class="source-url"><a href="{sourceUrl}" target="_blank">Source</a></div>{.end}
                {.end}
                </dv>
</header>
</div>

$('#mainArticle').click(function () {
    if ($('#mainArticle').hasClass("expanded")) {
        $('#mainArticle').css("height", "40px");
        $('#mainArticle p:first-child').css("width", "12em");
        $('#mainArticle p:first-child').css("white-space", "nowrap");
        $('#mainArticle').removeClass("expanded");
    } else {
        $('#mainArticle').css("height", "100%");
        $('#mainArticle p:first-child').css("width", "100%");
        $('#mainArticle p:first-child').css("white-space", "normal");
        $('#mainArticle').addClass("expanded");
    }
});