Geek Answers Handbook

Show / hide slider for any number of identifiers

I looked at this tutorial in w3schools for the jQuery toggler slider and wanted to do it for myself. However, my requirement is a little different. I don’t want to hard- code every CSS style and jQuery function .

For example, in the w3school implementation, they used:

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

but I want to make something out of this effect:

function toggleX(fid,pid){

var flipvar = document.getElementbyId(fid);
var panelvar = document.getElementbyId(pid);

$(document).ready(function(){
    $(flipvar).click(function(){
        $(panelvar).slideToggle("slow");
    });
});

}

My requirement is that I should be able to achieve this effect in HTML by simply doing the following:

<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Similarly for any number of DIVs in same pattern -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>

If it becomes easier for you to see this thing, here is a snippet below. Take a look at this and suggest improvements.

function toggleX(fid,pid){
		fid.style.background="#fff";//This is for testing purpose but the color never changes :/
}
//IF I could make that^ function work, I am planning to use the function below by using the id-values I get from onclick event

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="flip" onclick="toggleX('flip','panel');">Only this one works right now(Click me)</div>
<div id="panel">This slider is working only for THIS div and this slider is getting its style from 'panel' and 'flip' CSS. Can I get those CSS attributes by ID?<br/>(for flip1,panel1,flip2,panel2...and so on?)</div>

<div id="flip2" onclick="toggleX('flip2','panel2');">I want to make this DIV slidable show/hide too!</div>
<div id="panel2">And I want to get CSS style from ID too! :/</div>

<!--
I want this to happen for any number of ids that I make and pass with toggleX function.
-->
Run codeHide result

Let me finally break the question again.

I want:

  • Slider switch for many different divs
  • , CSS

:

  • , , . , . ID-.

    • ... , , , , , ( , ) SO, jsfiddle, . ?
      $('.toggler').click(function(evt) {
  var $toggler = $(this);
  var $container = $toggler.siblings('.container');

  $container.toggle();
  $toggler.text($container.is(':visible') ? "Hide" : "Show");
  evt.preventDefault();
});
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="toggleset">
  <a class="toggler" href="#">Hide</a>
  <div class="container">
    Data to show/hide
  </div>
  <br/>
  <a class="toggler" href="#">Hide</a>
  <div class="container">
    Data to show/hide
  </div>
</div>
      Hide result

  • CSS div, , DIV, (, , 10, , CSS )

  • , jQuery , div , , :

( ):

<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Similarly for any number of DIVs in same pattern -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>

?

  • , . , ! ID , , ID .
  • : , . - , !
  • :. , -, . .
+4
4

attribute starts with selector next(),

 $("div[id^=flip]").click(function() {
   $(this).next("div[id^=panel]").stop().slideToggle("slow");
 });

DEMO

, . - . id .

 $("div.flipClass").click(function() {
   $(this).next("div.panelClass").stop().slideToggle("slow");
 });

DEMO

+4

, , .

[id^=panel],
[id^=flip] {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

[id^=panel] {
  padding: 50px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
  function toggleX(pid) {
    $("#" + pid).slideToggle("slow");
  }
</script>
<div id="flip1" onclick="toggleX('panel1');">Only this one works right now(Click me)</div>
<div id="panel1">This slider is working only for THIS div and this slider is getting its style from 'panel' and 'flip' CSS. Can I get those CSS attributes by ID?
  <br/>(for flip1,panel1,flip2,panel2...and so on?)</div>
<div id="flip2" onclick="toggleX('panel2');">I want to make this DIV slidable show/hide too!</div>
<div id="panel2">And I want to get CSS style from ID too! :/</div>
Hide result
+1
//Solution for id
function toggleX(fid,pid){
$('#'+pid).slideToggle("slow");
}

//I would do it like this  
<div class="wrapper">
    <div class="flip">...</div>
    <div class="panel">...</div>
</div>
<div class="wrapper">
    <div class="flip">...</div>
    <div class="panel">...</div>
</div>

<script>
$(document).ready(function() {
    $('.flip').click(function() {
        $('.panel', $(this).closest('.wrapper')).slideToggle('slow');
    });
});
</script>
0

Converting my comment.

A few observations:

  • You have no document. inside another function.
  • It’s hard to mix if you mix $("#id")anddocument.getElementbyId("id")
  • W3Schools is NOT a great resource - use MDN or other tutorials.

It looks like you can use the class anyway and use .next () to get into the div you want to flip.

$(function() {
  $(".flip").on("click", function() {
    $(this).next(".panel").slideToggle();
  });
});
.panel { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flip">Show panel1</div>
<div class="panel">Panel 1</div>
<div class="flip">Show panel2</div>
<div class="panel">Panel 2</div>
<div class="flip">Show panel3</div>
<div class="panel">Panel 3</div>
<div class="flip">Show panel4</div>
<div class="panel">Panel 4</div>
Run codeHide result
0
source

More articles:


All Articles