问题的原因是在点击事件中，根据列表项的显示状态来切换列表项的显示和隐藏，并同时切换标题中的"+"和"-"符号。解决方法是通过JavaScript代码实现点击事件的处理，并使用CSS样式来控制列表项和标题的显示和隐藏。

下面是解决该问题的代码：

JavaScript代码：

function clickDropdown(){
  var listitems = document.getElementById("RevealCard");
  var header = document.getElementById("RevealCard-header").innerHTML;
  
  if(listitems.style.display == "none"){
    listitems.style.display = 'block';
    header = header.replace('+', '-');
    document.getElementById("RevealCard-header").innerHTML = header;
  }else{
    listitems.style.display = 'none';
    header = header.replace('-','+');
    document.getElementById("RevealCard-header").innerHTML = header;
  }
}

CSS样式：

.RevealCard-header {
  background: #000;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0;
  padding: 0.5em;
  position: relative;
}
.RevealCard-header::after {
  border: 1px solid #fff;
  content: "-";
  height: 1.15em;
  line-height: 1em;
  position: absolute;
  right: 0.5em;
  text-align: center;
  width: 1.15em;
}
.RevealCard-list {
  border: 1px solid #000;
  border-top: none;
  margin: 0 0 2em 0;
  padding-bottom: 1em;
  padding-top: 1em;
}

HTML代码：

    

    Top five loves +
    
  

    
First item
    
Second item
    
Third item
    
Fourth item
    
Fifth item
  

以上代码实现了点击事件的处理，根据列表项的显示状态来切换列表项的显示和隐藏，并在标题中切换"+"和"-"符号的显示。

JavaScript显示和隐藏的问题出现的原因是要根据点击事件来切换列表的显示和隐藏，但是没有正确地处理和操作DOM元素。解决方法是通过添加事件监听器来实现点击事件的处理，并使用条件语句来判断列表的当前显示状态，然后根据不同的情况进行显示和隐藏的操作。

具体的解决方案如下所示：

首先，需要获取相关的DOM元素，包括header元素、list元素和collapseChar元素。可以使用document.getElementsByClassName()方法和getElementById()方法来获取这些元素。

然后，通过addEventListener()方法为header元素添加点击事件的监听器。当点击header元素时，会触发点击事件。

在点击事件的处理函数中，使用条件语句来判断列表的显示状态。如果列表当前是显示的，则隐藏列表，同时修改collapseChar元素的内容为“+”符号；如果列表当前是隐藏的，则显示列表，同时修改collapseChar元素的内容为“-”符号。

通过设置列表元素的display属性来实现显示和隐藏的效果。当display属性的值为“none”时，列表隐藏；当display属性的值为“block”时，列表显示。

除了JavaScript代码，还需要一些CSS样式和HTML结构来完整实现这个问题的解决方案。CSS样式用于设置RevealCard-header、RevealCard-list和collapseChar的样式，包括背景颜色、边框、字体大小等。HTML结构用于创建RevealCard组件，其中包含一个header元素和一个list元素。

如果需要在多个RevealCard组件中实现相同的功能，可以通过类似的方式来操作和处理不同的DOM元素。例如，可以为每个RevealCard组件分别获取对应的header元素和list元素，并设置对应的点击事件处理函数。

以上就是关于JavaScript显示和隐藏问题的原因和解决方法的整理。该问题的解决方案通过事件监听器和条件语句来处理点击事件，并通过操作DOM元素的display属性来实现列表的显示和隐藏。

在上述代码中，我们希望切换OL元素的显示和隐藏，并且还想要更改伪类::after的CSS样式。最简单的方法是创建第二个CSS ::after样式，并将它们一起切换。

代码中的Javascript部分使用了事件监听器，当点击RevealCard-header时，会触发函数。函数中通过获取点击元素的父元素中的ol元素，并通过判断ol元素的display属性来切换显示和隐藏状态。同时，还会改变点击元素的类名，从而改变伪类::after的样式。

CSS部分定义了RevealCard、RevealCard-header、header-showing、header-hiding、RevealCard-list等类的样式。其中，header-showing和header-hiding类分别定义了::after伪类的样式，通过改变content属性来改变显示的内容。

HTML部分定义了两个RevealCard块，每个块中包含一个RevealCard-header和一个RevealCard-list。

更新部分支持多个RevealCard块，通过将监听器绑定到头部元素，然后在其父元素的DOM结构中进行操作。

对于如何更改伪类::after的内容，经过研究发现，伪元素的内容不能通过JavaScript直接编辑，因为它们实际上不是DOM的一部分。但是可以通过一些技巧来实现，具体方法可以参考stackoverflow上的一些解决方案。

虽然有一些解决方案，但它们都有一定的局限性和复杂性。在这里，我们选择了一个相对简单的解决方案，并将其应用于代码中。