Как создать несколько кнопок Toggle

Question

Что я ищу, это создать кнопку с несколькими кнопками, если одна кнопка нажата, другой должен быть закрыт, В настоящее время у меня есть две кнопки переключения, поэтому я написал код переключения, но его длинный и он будет продолжать увеличиваться, если я увеличиваю количество кнопок переключения , есть ли какой-нибудь короткий метод для этого?

Мой код здесь идет:

$("#cat_toggle").click(function(e){ 
      e.preventDefault(); 
if($('.row42').is(":visible")) { 
    $(".row42").hide(); 
     $(".row41").slideToggle(500); 

    } else { 
       $(".row41").slideToggle(500); 
     } 
}); 


$("#a_z").click(function(e){ 
      e.preventDefault(); 
if($('.row41').is(":visible")) { 
    $(".row41").hide(); 
     $(".row42").slideToggle(500); 

    } else { 
       $(".row42").slideToggle(500); 
     } 
}); 

также JSfiddle ссылка http://jsfiddle.net/kundansingh/9pdks27c/2/

Примечание: Я не ищу каких-либо плагинов

Answer 1

Вы можете использовать класс для ваших кнопок и сделать идентификаторы, как их содержание:

<div id="row41" class="button">Sample 1</div> 
<div id="row42" class="button">Sample 2</div> 
<div id="row43" class="button">Sample 3</div> 

<div class="row41">sample demo txt one 1</div> 
<div class="row42">sample demo txt two 2</div> 
<div class="row43">sample demo txt three 3</div> 

И добавить click event для этого класса:

$(".button").click(function (e) { 

     e.preventDefault(); 

     $('[class^=row]').not($('.'+this.id)).hide();   

     $('.'+this.id).slideToggle(500); 
}); 

Вот DEMO

Answer 2

Изменена структура HTML, чтобы получить идентификаторы:

<div class="cat_toggle" data-target="row1">Sample 1</div> 
<div class="cat_toggle" data-target="row2"> Sample 2 </div> 
<div class="cat_toggle" data-target="row3">Sample 3</div> 
<div class="cat_toggle" data-target="row4"> Sample 4 </div>  

<div class="row" id="row1" > 
sample demo txt one 1 
</div> 
<div class="row" id="row2"> 
sample demo txt two 2 
</div> 
<div class="row" id="row3" > 
sample demo txt one 3333 
</div> 
<div class="row" id="row4"> 
sample demo txt two 4444444444444 
</div> 

Я использую атрибут пользовательских данных - очень приятная функция.

JQuery:

$(".cat_toggle").click(function(e){ 
       e.preventDefault(); 
      id=$(this).data('target'); 
      //console.log(id); 


     if($('.row' +'#'+id).is(":visible")) { 

    $(".row"+'#'+id).slideUp(500); 

    } 
      else { 
       $(".row"+'#'+id).slideToggle(500); 
$(".row"+'#'+id).siblings('.row').slideUp(500); 
      } 


     }); 

Демо: http://jsfiddle.net/9pdks27c/4/

P.S. CSS также упрощен, просто нужны классы ...

Answer 3

Вот один из способов сделать это, с массивными изменениями в текущих html, css и js.

недавно организовал HTML:

<button class="toggle-category" data-toggle-id="s1">Sample 1</button> 
<button class="toggle-category" data-toggle-id="s2">Sample 2</button> 
<div class="categories toggle-group"> 
    <div class="category hidden" id="s1">sample demo txt one 1</div> 
    <div class="category hidden" id="s2">sample demo two 2</div> 
</div> 

Некоторые Javascript:

$(function() { 
    $("body").on("click",".toggle-category", function (event) { 
     var $trigger = $(this); 
     var $target = $('#'+$trigger.data("toggle-id")); 
     var $group = $target.closest(".toggle-group"); 
     if($target.length){ 
      // Hide all 
      $(".category:visible", $group).not($target).slideToggle("slow"); 
      // Show selected 
      if(!$target.is(":visible")) 
      { 
       $target.slideToggle("slow"); 
      } 
     } 
    }) 
}); 

Пример CSS:

button { 
    background-color:#F85F5F; 
    display: inline-block; 
} 
.category { 
    margin: 15px 0; 
} 
.hidden { 
    display: none; 
} 

JsFiddle демо: http://jsfiddle.net/9pdks27c/7/

Answer 4

Вы должны использовать те же имена id s, и class es, чтобы помочь вам ориентироваться на элементы.

$("#wrap div[id^='cat']").click(function() { 
 
    var active = $(this).attr('id'); 
 
    $(this).siblings("[class^='cat']:not(." + active + ")").hide(500); 
 
    $(this).siblings("." + active).slideToggle(500); 
 
});

#cat1, 
 
#cat2, 
 
#cat3 { 
 
    margin-top: 24px; 
 
    margin-left: 2%; 
 
    background-color: #F85F5F; 
 
    padding: 0 15px; 
 
    line-height: 36px; 
 
    float: left; 
 
    color: #FFF; 
 
    font-weight: 600; 
 
    cursor: pointer; 
 
} 
 
.cat1, 
 
.cat2, 
 
.cat3 { 
 
    display: none; 
 
    clear: both; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div id="cat1">Sample 1</div> 
 
    <div id="cat2">Sample 2</div> 
 
    <div id="cat3">Sample 3</div> 
 
    <div class="cat1">sample demo txt one 1</div> 
 
    <div class="cat2">sample demo txt two 2</div> 
 
    <div class="cat3">sample demo txt two 3</div> 
 
</div>