Javascript 每次单击链接按钮（来回）时更改图像和文本容器

我有两个链接的html按钮：

<div class="tech-sp-tab-title">
<a href="javascript:void(0)" class="toggle_img sp-tab-active" data-target="android" data-section="tabs" data-src='/wp-content/uploads/2020/09/android.png'>    
<i class="fab fa-android"></i>Android</a></div>

<div class="tech-sp-tab-title">
<a href="javascript:void(0)" class="toggle_img" data-target="apple" data-section="tabs" data-src='/wp-content/uploads/2020/09/apple.png'>
<i class="fab fa-apple"></i>Apple</a></div>
       
</div>

我想要的是，在同一个按钮上单击按钮（由标题和文本组成），同时更改按钮下方的部分。我的默认分区类id是hideclick。我想开始的另一个部分是display none，当点击apple按钮时变为visable，然后在点击android按钮时再次隐藏，类id为showclick

我在这里成功地使用了一些线程来创建这段代码，它成功地交换了“click”上的部分，但是您只需在包含按钮的容器中单击即可。你点击什么按钮并不重要。每次单击时，它都会切换显示的文本部分

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ 
$('.showclick').eq(i).show();
$('.hideclick').eq(i).hide();

}); });
}); });

</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>

document.addEventListener（'DOMContentLoaded'，function（）{
jQuery（函数（$）{
$（'.clicktoshow'）。每个（函数（i）{
$（此）。单击（函数（）{
$（'.showclick'）.eq（i）.show（）；
$（'.hideclick'）.eq（i）.hide（）；
}); });
}); });
。单击显示{
光标：指针；
}
.showclick{
显示：无；
}

有没有人建议我如何将所有这些结合起来，按照我的意愿工作

jQuery(document).ready(function( $ ) {
    
    var imgIndex = "1";
    $('body').on('click', '.toggle_img', function() {
        
        
        imgIndex  = (imgIndex == '1') ? '2' : '1';
        console.log(imgIndex)
        var imgSrc = $(this).data('src');
        var imgSectionTarget = $(this).data('section');
        var linkTarget = $(this).data('target');
        $('#tech-sp-tab[data-section="'+imgSectionTarget+'"] img[data-target!="'+linkTarget+'"]').removeClass('active')
        $('#tech-sp-tab[data-section="'+imgSectionTarget+'"] img[data-target="'+linkTarget+'"]').addClass('active')
console.log('linkTarget')
        console.log(linkTarget)

        if(!$(this).hasClass('sp-tab-active')) 
        {
            $('.toggle_img').removeClass('sp-tab-active');
            
            $(this).addClass('sp-tab-active');
            
        } 
    }); 
});

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ 
$('.showclick').eq(i).show();
$('.hideclick').eq(i).hide();

}); });
}); });

</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>