Javascript 当使用HTML/JS和CSS单击另一个按钮时，是否打开一列按钮？

我有一排5个按钮，它们已经在下面的小提琴中实现了。我想以这样的方式实现代码：如果我点击任何按钮，例如水，则会垂直显示特定按钮的列表。类似地，所有5个按钮都会显示一个按钮列表，并且一次只能看到一个列表

<div id="outer">
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;" >Water</button></div>
        
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Public</button></div>
        
        <div class="inner"><button class="msgBtn2">Transport</button></div>
        
          <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">House</button></div>
          
          
            <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Utilities</button></div>
            
    </div> 

水
公开的
运输
房子
公用事业

这是小提琴：

我该怎么做？我尝试用OnClick实现它，但无法实现。

功能弹出窗口（id）{
if（$（“#”+id）.hasClass（“vis”））{
$（“#”+id）；
}否则{
$（“.dropdown content”）.removeClass（“vis”）；
$（“#”+id）.addClass（“vis”）；
}
}

#外部
{
宽度：100%；
文本对齐：居中；
}
内部的
{
显示：内联块；
右边填充：20px；
}
.msgBtn2{
光标：指针；
字号：1.2rem；
高度：2.5雷姆；
边界：无；
边界半径：10px；
颜色：蓝色；
背景色：#ffff；
大纲：无；
盒影：0.3雷姆rgba（121121,0.70）；
}
.下拉列表{
位置：相对位置；
显示：内联块；
宽度：100%；
}
.下拉内容{
最小宽度：160px；
顶部：50px；
左边距：-40px；
显示：无；
位置：绝对位置；
z指数：1；
颜色：红色；
}
.下拉式内容按钮{
颜色：红色；
保证金：5px
}
维斯先生{
显示：块；
}

水
按钮一
按钮二
按钮三
公开的
按钮一
按钮二
按钮三
其他按钮
运输
按钮一
按钮二
按钮三
其他按钮
房子
按钮一
按钮二
按钮三
其他按钮
公用事业
按钮一
按钮二
按钮三
2其他按钮

使用编辑器，您实际上可以创建一个可运行的示例，而无需链接fiddle。它是带有

的方形图标。您尝试了什么？你犯了什么错误？添加你的JS代码。@Bulent他的JS在fiddle示例中，但编辑队列已满，因此我无法在fiddle中进行编辑=/没有JS代码。@Bulent我快发疯了，忽略不计。