在django中实现shopify模板(Implement shopify templates in django)

 您可以使用相同的button和boxes class名称。 data-target attr用于指定要切换的元素。 
 
 更新 
 
 
 
 每个按钮切换功能 
 
 
 添加了Bold文本切换功能 
 
 
 
 
 
 
  
$(document).ready(function() {
  $('.click').click(function(event) {
    event.stopPropagation();
    if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){
    $(".showup").eq($(this).attr('data-target')).slideUp();
      $('.click').removeClass('bold')
    }
    else{
      $(".showup").hide();
       $('.click').removeClass('bold')
    $(".showup").eq($(this).attr('data-target')).slideToggle("fast");
      $(this).toggleClass('bold')
    }
  });
}).on('click',function(){
$(".showup").hide();
  $('.click').removeClass('bold')
})
 
  
body {
  margin: 50px;
}

.showup{
  width: 100%;
  height: 100px;
  background: red;
  display: none;
  position: fixed;
}
.bold{
font-weight:bold;
}

.click{
  cursor: pointer;
  display: inline-block;
  padding: 0 15px;
}
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" data-target="0">Link 1</div>
<div class="click" data-target="1">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup">something else I want to show</div>
 
 
 
 

You could do with same class name of the button and boxes .data-target attr used for target the which element to toggling .
 
Updated 
 
 
 
Toggle function with each button
 
 
Bold text toggle function added
 
 
 
 
 
 
  
$(document).ready(function() {
  $('.click').click(function(event) {
    event.stopPropagation();
    if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){
    $(".showup").eq($(this).attr('data-target')).slideUp();
      $('.click').removeClass('bold')
    }
    else{
      $(".showup").hide();
       $('.click').removeClass('bold')
    $(".showup").eq($(this).attr('data-target')).slideToggle("fast");
      $(this).toggleClass('bold')
    }
  });
}).on('click',function(){
$(".showup").hide();
  $('.click').removeClass('bold')
})
 
  
body {
  margin: 50px;
}

.showup{
  width: 100%;
  height: 100px;
  background: red;
  display: none;
  position: fixed;
}
.bold{
font-weight:bold;
}

.click{
  cursor: pointer;
  display: inline-block;
  padding: 0 15px;
}
 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" data-target="0">Link 1</div>
<div class="click" data-target="1">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup">something else I want to show</div>