Javascript 通过单击另一个展开/折叠div

我希望创建一个div，当单击一个完全独立的非父div元素时，它会展开和折叠

下面是一个我喜欢并且一直在胡闹的扩展/折叠效果的例子。我不确定如何最好地修改下面的代码，这样我就可以，比如说，单击侧边栏中的一个div，并使位于标题下面的另一个div展开/折叠，将其下面的所有内容向下推

例如，展开/折叠div的内容可能是一个搜索栏，用户可以通过单击边栏按钮来显示/隐藏它

$（“.header”）。单击（函数（）{
$header=$（此）；
//获取下一个元素
$content=$header.next（）；
//打开所需内容-切换幻灯片-如果可见，向上滑动，如果不向下滑动。
$content.slideToggle（500，函数（）{
//滑动切换完成后执行此操作
//根据内容div的可见性更改标题文本
$header.text（函数（）{
//根据条件更改文本
返回$content.is（“：visible”）？“Collapse”：“Expand”；
});
});
});
.container{
宽度：100%；
边框：1px实心#D3；
}
.货柜组{
宽度：100%；
}
.容器.标题{
背景色：#D3；
填充：2px；
光标：指针；
字体大小：粗体；
}
.容器.内容{
显示：无；
填充物：5px；
}

扩大

我在这里放了一个搜索栏


$（“.header”）。单击（函数（）{
$（'.content'）.slideToggle（）.toggleClass（'active'）；
if（$（'.content'）.hasClass（'active'））{
$（'.header span'）.text（'Collapse'）；
}否则{
$（'.header span'）.text（'Expand'）；
}
});
$（“按钮”）。单击（函数（）{
$（“.header”）.trigger（'click'）；
})
.container{
宽度：100%；
边框：1px实心#D3；
}
.货柜组{
宽度：100%；
}
.容器.标题{
背景色：#D3；
填充：2px；
光标：指针；
字体大小：粗体；
}
.容器.内容{
显示：无；
填充物：5px；
}

扩大

我在这里放了一个搜索栏

再次单击
$（“.toggle”）。单击（函数（）{
//获取内容
$content=$（“.content”）
//打开内容-切换幻灯片-如果可见，向上滑动，如果不向下滑动。
$content.slideToggle（500，函数（）{
//滑动切换完成后执行此操作
//根据内容div的可见性更改标题文本
$header.text（函数（）{
//根据条件更改文本
返回$content.is（“：visible”）？“Collapse”：“Expand”；
});
});
});
.container{
宽度：100%；
边框：1px实心#D3；
}
.货柜组{
宽度：100%；
}
.容器.标题{
背景色：#D3；
填充：2px；
光标：指针；
字体大小：粗体；
}
.容器.内容{
显示：无；
填充物：5px；
}

扩大

我在这里放了一个搜索栏

点击我
这就是您想要的吗。我这么问是因为这是最基本的东西是的，这就是我想要的。我想这是基本的东西，但我对这一点很陌生（如果这还不明显的话），所以谢谢你的帮助。不客气，兄弟，如果问题解决了，请接受答案；）