CODEWITHSUNDEEP
javascriptjquery
fackz
fackz

Reputation: 531

Make jquery toggle work with dynamic content

I've the following code on my website: http://jsfiddle.net/dJLK3/1/ As you can see, it works just fine.

The problem is: those divs and link triggers come from a database. Today I have 1, tomorrow it can be 10...

I can not figure out how to convert it and make it work without needing to right lot's of codes like link1, link2, link3, link4, link5 and so on...

Anyone? :)

Upvotes: 1

Views: 2697

Answers (3)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Use data attr and jQuery.data. reference

Update:
according to this comment.

html

<div class="menu">
    <a href="#" class="link" data-slide-content="div1">Link1</a>
    <a href="#" class="link" data-slide-content="div2">Link2</a>
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>​

js

$('.menu').on('click', '.link', function(){
    var id = $(this).data('slideContent');
    $('.slide').not('#' + id).slideUp(function() {
        $('#' + id).slideToggle();
    });
});

​css

.slide {
    display: none;
    height: 100px;
    width: 100px;
    position: fixed;
    top: 30px;
}

demo

References:

Upvotes: 2

Jibi Abraham
Jibi Abraham

Reputation: 4696

Update

Here's a fiddle with a possible answer - FIDDLE - Update - With new requirements

Code posted here for clarification

<div id='link_collection'>
    <a href="#" class="link">Link1</a>
    <a href="#" class="link">Link2</a>
</div>
<div id='div_collection'>
    <div class='div current'></div>
    <div class='div'></div>
</div>

$(document).ready(function() {
    $('#link_collection').on('click', '.link', function() {
        var divCollection = $('#div_collection .div'),
            index = $(this).index(), hasClickedMeAgain,
            current = divCollection.filter('.current');

        hasClickedMeAgain = current.index() === index;
        if (hasClickedMeAgain){
            current.slideToggle();
            return false;
        }
        current.slideUp(function() {
            $(this).removeClass('current');
            divCollection.eq(index).addClass('current').slideToggle();
        });
    })
});

This way, you don't need to keep tag of anything. Just keep inserting the div and link in the order in which they arrive, and the code then handles itself. All the best.

Upvotes: 1

jay c.
jay c.

Reputation: 1561

Will this work for you? Use the same class attribute for all of them. And have the following code on document.ready() to assign on click events:

HTML:

<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>

<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>

Javascript:

$("a.ui-link-option").each(
  function (index) {
    var $this = $(this);
    $this.data("index", index);
    $this.bind("click", function(e) {
      var $this = $(this);
      var linkIndex = $this.data("index");
      $("div.ui-link-option-text").each(
        function (index) {
          if (index == linkIndex) {
            $(this).slideToggle();
          } else {
            $(this).hide();
          }
        }
      );
    });
  }
);

Upvotes: 0

Related Questions