Javascript 从CMS加载的动态内容。单击后显示的员工职务说明

我正在创建一个员工页面，其中一行有3名员工，每行33%，单击一名员工后，将显示下面的描述。描述为容器的100%。我的问题是，一旦点击图像，它就会将接下来的两名员工推下

工作人员将通过CMS加载，没有任何内容可以硬编码

JS小提琴在这里：

HTML:

乔恩·多伊
09548554
jon@gmail.com

Lorem ipsum door sit amet，concetetur adipising elit。作坊、临时作坊、自由作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊


乔恩·多伊
09548554
jon@gmail.com

Lorem ipsum door sit amet，concetetur adipising elit。作坊、临时作坊、自由作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊


乔恩·多伊
09548554
jon@gmail.com

Lorem ipsum door sit amet，concetetur adipising elit。作坊、临时作坊、自由作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊、最大化作坊

JS:

$（“.job desc”）。单击（函数（）{
$（“.description”）.fadeToggle（“慢速”、“线性”）；
});

您可以这样做：

在页面加载时，添加一些CSS，将.description元素的样式更改为“无”。 然后单击.job desc时，切换可见性

        $(document).ready(function(){
        $('.description').css('display','none');

        $( ".job-desc" ).click(function() {
          $( ".description" ).toggle();
    });
});

这是一把小提琴：

希望有帮助，

---

Marc

你能创建一个演示吗，包括你的CSS等。当然，对不起，我忘了添加CSS，我添加了JS Fiddle。我的问题是，一旦按我的小提琴单击，我就无法使3幅图像保持一行。段落将需要附加到一个区块中的工作人员，以便CMS可以通过区块循环并添加多个Entries我可以想出这样的方法，您也可以将其放置在描述中，这是我在循环中创建的另一个div。谢谢！非常接近。我需要在

之后保持笔直，因为内容将从CMS加载

<script>

      $( ".job-desc" ).click(function() {
          $( ".description" ).fadeToggle( "slow", "linear" );
    });

  </script>

        $(document).ready(function(){
        $('.description').css('display','none');

        $( ".job-desc" ).click(function() {
          $( ".description" ).toggle();
    });
});