CODEWITHSUNDEEP
javascriptjqueryhtml
C. Schulz
C. Schulz

Reputation: 3

Is there any way to combine these scripts?

I am attempting to learn jQuery, but I can't figure out how to make one div slide down separately from the others, without making a separate script for each div. Whenever I try to make it into one script, the divs do the same slide at the same time.

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

<script>
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").Toggle("slow");
  });
});
</script>

<script>
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#pane2").Toggle("slow");
  });
});
</script>

<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
 padding: 50px;
}
</style>
</head>

<body>

<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>


<div id="flip1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>


<div id="flip2">Click to slide up panel</div>
<div id="pane2">Hello world!</div>

</body>

Thank you for any help.

Upvotes: 0

Views: 143

Answers (4)

Erik Philips
Erik Philips

Reputation: 54618

Take a moment and read Decoupling Your HTML, CSS, and JavaScript - Philip Walton

My answer is really just an update to user2181397's answer:

html:

<div id="flip" class="js-slide-up" data-target="#panel">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="flip1" class="js-slide-up" data-target="#panel1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2" class="js-slide-up" data-target="#pane2" >Click to slide up     panel</div>
<div id="pane2">Hello world!</div>

jQuery:

$(document).ready(function() {
  $(".js-slide-up").click(function() {
    var selector = $(this).data('target')
    $(selector).slideUp("slow");
  });
});

This is pretty cool because these all work:

<div class="js-slide-up" data-target="#panel,#panel1">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="panel1">Hello world!</div>

<div class="js-slide-up" data-target=".panel">Click to slide up panel</div>
<div class="panel">Hello world!</div>
<div class="panel">Hello world!</div>
<div class="panel">Hello world!</div>

Upvotes: 0

Jed Fox
Jed Fox

Reputation: 3025

Try using the this value inside the callback. First, change your id="flip#" to class="flip" and id="panel#" to class="panel". Then:

$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next('.panel').slideUp("slow");
  });
});

This will take the clicked element’s next sibling, then slide it up.

Upvotes: 2

brk
brk

Reputation: 50291

Yes it can be done. In simplest way you can remove the multiple document.ready & put all the code inside one document.ready.

Beside that you can create a single class and add an attribute data-item & pass the id of the div you want to slide up.

Inside click function use $(this) to point the jquery object.

Hope this snippet will be useful

JS

$(document).ready(function() {
    $(".clickItem").click(function() {
        var getItem =$(this).attr('data-item')
      $("#"+getItem).slideUp("slow");
    });
  });

HTML

<div id="flip"  class="clickItem" data-item="panel">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="flip1"  class="clickItem" data-item="panel1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2"class="clickItem" data-item="pane2" >Click to slide up panel</div>
<div id="pane2">Hello world!</div>

DEMO

Upvotes: 1

Brandon
Brandon

Reputation: 3266

To trim down the code, use classes instead of ID's like so:

<div class="flip">Click to slide up panel</div>
<div class="panel">Hello world!</div>

<div class="flip">Click to slide up panel</div>
<div class="panel">Hello world!</div>

Then, in your script (one script) just hide all of the panels when the page loads using hide() and listen for the .flip class to be clicked. When it is, initiate slideToggle() on the next() element.

$(".panel").hide();

$(".flip").click(function() {

  $(this).next().slideToggle();

});

DEMO: http://jsbin.com/yupobomuje/edit?html,js,output

Upvotes: 0

Related Questions