• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

How do you take a "hard coded" jquery function and turn it "dynamic"


I have a "hard coded" function that works great but I need it to work dynamically since it is dependent on records in a database.

This is what I have so far (thanks to Alexcode) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $("#toggle_all_dates").on('click', function () {
        var $this = $(this);
            $('#dates_list li div.moredates')
                .each(function(idx,item){ toggleDate(item); });
            $('#dates_list li div.moredates:visible')
                .each(function(idx,item){ toggleDate(item); });
        $(this).html($(this).text() == 'Hide all dates' ? 'Show all dates' : 'Hide all dates');
    $("#dates_list li a").on('click', function () {
    function toggleDate(elem){
        var $elem = $(elem);
        $elem.html($elem.text() == '[-] Dates' ? '[+] Dates' : '[-] Dates');


    list-style-type: none;
    margin: 0;
    padding: 0;
ul#dates_list a{
    cursor: pointer;
ul#dates_list div.moredates {
    display: none;


<a id="toggle_all_dates" class="moredates showAll">Show all dates</a>

<ul id="dates_list">
        <a id="moredates_1">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates one...</div> 
        <a id="moredates_2">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates two...</div> 
        <a id="moredates_3">[+]Dates</a>
        <div class="moredates" data-collapsed="true">More dates three...</div>

Open in new window

Is there a way to so make the 3 id's ( "moredates_1" , "moredates_2" and "moredates_3" have a "dynamic name" so that they would be generated based on a condition from a database.

  • 2
1 Solution
Rainer JeschorCommented:
question: why do want to assign IDs to these elements?
From the code I see, the id of the element is used nowhere - hence I think you even can ommit the id (but just if there is not more code you have not yet posted).

smfmetro10Author Commented:
 You're right!!
 Is it possible to change the code to work with <td> instead of ul's?

I did a quick swap but didn't seem to get it to work :)
smfmetro10Author Commented:
Thanks for "eye" Sometimes I'm too close to the barn to see what color I'm painting it :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now