Skip to main content
P
Prince Mike
Inspiring
August 1, 2017
Answered

Open div within Dreamweaver CS6 table row based on record ID clicked on

  • August 1, 2017
  • 1 reply
  • 1489 views

Hello All,

Please I need your help. FOr several hours now I have been working to to open div within Dreamweaver table row based on the ID of the record in that row.

I have a table with 4 records in a rows with possibility of growing to 100 ros or more. Each row has a hidden div of which when you click on the plus icon it should display the hidden div so one can read more details about that very record.

At the moment only record with 4 is working perfectly.

Now when I click on the on record with id 1, the system displays the details belonging to record id 4.

What I am getting is not what I want. I need help on making the div show the correct details based on the row records. That is to say, the div on each of the rows should shows the details of the respective row and not the record of div 4. E.g The div on row with record 2 should show the details of record 2, the div on row with record 3 should show the details of record 3 and so on and so forth.

At the moment here is the javascript that shows and hides the icon buttons

<script language="javascript">

function toggle5(showHideDiv, switchImgTag) {

        var ele = document.getElementById(showHideDiv);

        var imageEle = document.getElementById(switchImgTag);

        if(ele.style.display == "none") {

                ele.style.display = "block";

imageEle.innerHTML = '<img src="images/minus.jpg">';

        }

        else {

                ele.style.display = "none";

                imageEle.innerHTML = '<img src="images/plus.jpg">';

        }

}

</script>

Here is the line of code that displays the green plus icon and red minus icon

"<a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="plus.png"></a>"

And here is the lines of code that displays the div when the icons are clicked on

<div id="contentDivImg" style="display: none;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

Your help on how to make the divs show the records belonging to each ID is highly appreciated.

Thank you in advance

Mike

    This topic has been closed for replies.
    Correct answer BenPleysier

    Definition of an ID:

    The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

    In your case you do not have a unique ID but a number of same ID's.

    Solution: Name each div with a unique ID and use that ID in the JavaScript function as in

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <a href="#" onclick="toggle_display('content1');"><img src="plus.png" alt="show content1"></a>
    <div id="content1" style="display: none;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>
    <br>
    <a href="#" onclick="toggle_display('content2');"><img src="plus.png" alt="show content2"></a>
    <div id="content2" style="display: none;">Content 2.</div>
    <script>
    function toggle_display(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'block')
    e.style.display = 'none';
     else
    e.style.display = 'block';
    }
    </script>
    </body>
    </html>

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    August 1, 2017

    Definition of an ID:

    The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

    In your case you do not have a unique ID but a number of same ID's.

    Solution: Name each div with a unique ID and use that ID in the JavaScript function as in

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <a href="#" onclick="toggle_display('content1');"><img src="plus.png" alt="show content1"></a>
    <div id="content1" style="display: none;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>
    <br>
    <a href="#" onclick="toggle_display('content2');"><img src="plus.png" alt="show content2"></a>
    <div id="content2" style="display: none;">Content 2.</div>
    <script>
    function toggle_display(id) {
     var e = document.getElementById(id);
     if(e.style.display == 'block')
    e.style.display = 'none';
     else
    e.style.display = 'block';
    }
    </script>
    </body>
    </html>
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      P
      Prince MikeAuthor
      Inspiring
      August 1, 2017

      Thank you so much Mr BenPleysier. The solution you provided worked perfectly.

      I changed the id from id="content2" to  id="<?php echo $row_rsPmts['my_id']; ?>" .

      I also changed the onclick action from onclick="toggle_display('content2');" to onclick="toggle_display('<?php echo $row_rsPmts['my_id']; ?>');" .

      So instead of this

      <a href="#" onclick="toggle_display('content2');"><img src="plus.png" alt="show content2"></a> 

      <div id="content2" style="display: none;">Content 2.</div> 

      I have this

      <a href="#" onclick="toggle_display('<?php echo $row_rsPmts['my_id']; ?>');"><img src="images/plus.jpg" alt="Show more"></a> 

      <div id="id="<?php echo $row_rsPmts['my_id']; ?>"" style="display: none;">Content 2.</div> 

      P
      Prince MikeAuthor
      Inspiring
      August 1, 2017

      Just an addition sir. I dont know if its possible to twist the code a little to change the image from to when the div shows and then from  to when the div hides. I have tried to twist the code from

      <script> 

      function toggle_display(id) { 

      var e = document.getElementById(id); 

      if(e.style.display == 'block') 

      e.style.display = 'none'; 

      else 

      e.style.display = 'block'; 

      } 

      </script>

      which is what you wrote to

      <script> 

      function toggle_display(id, switchImgTag) { 

      var e = document.getElementById(id);

      var imageEle = document.getElementById(switchImgTag);  

      if(e.style.display == 'block')  {

      e.style.display = 'none';

        imageEle.innerHTML = '<img src="images/plus.jpg">';

      }

      else 

      e.style.display = 'block'; 

      imageEle.innerHTML = '<img src="images/minus.jpg">';

      } 

      </script>

      Looking at the original code as seen below

      <script language="javascript">

      function toggle5(showHideDiv, switchImgTag) {

              var ele = document.getElementById(showHideDiv);

              var imageEle = document.getElementById(switchImgTag);

              if(ele.style.display == "none") {

                      ele.style.display = "block";

      imageEle.innerHTML = '<img src="minus.png">';

              }

              else {

                      ele.style.display = "none";

                      imageEle.innerHTML = '<img src="plus.png">';

              }

      }

      </script>

      <div>

      <div>Let's use images!</div>

          <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="plus.png"></a>

      </div>

      <div id="contentDivImg" style="display: none;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

      I see the programmer added a number snippets. A little help on this is appreciated as well.

      Thank you

      Firefly Community Gallery
      Adobe Firefly

      Remix with Firefly Community Gallery

      Thousands of free creations to fall in love with and remix in Firefly.

      Explore now
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices