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

Report · Jul 31, 2017

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

Report · Jul 31, 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!

Report · Aug 01, 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>

Report · Aug 01, 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

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

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

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>

</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

Report · Aug 01, 2017

Just add the images as per

function toggle_display(id) {
var e = document.getElementById(id);
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">';
}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Aug 02, 2017

Thank you sir for the update but it didnt work.

In fact the Plus icons became in active. When I click on either of the Plus icons, the hidden div's do not display but when I put back the earlier code you wrote, everything works perfectly.

Please kindly try it and see if it works at your end.

Thank you

Report · Aug 02, 2017

Add a class 'show_info' to each of your 'trigger' anchor tags (shown in red below). Make sure the images names are:

<img src="images/plus.jpg" alt="Plus"> (this is in the html by default and the script)

and

<img src="images/minus.jpg" alt="Minus"> (this is in the script)

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

<br>

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

Then use the below javascript: (This just deals with swapping the plus and minus images in the anchor tags, nothing else.

var show_info = document.getElementsByClassName("show_info");

var count = show_info.length;

for(i = 0 ; i < count ; i++){

show_info.addEventListener('click', function () {

if (this.innerHTML == '<img src="images/plus.jpg" alt="Plus">') {

this.innerHTML = '<img src="images/minus.jpg" alt="Minus">'

}

else {

this.innerHTML = '<img src="images/plus.jpg" alt="Plus">'

}

});

}

</script>

Report · Aug 02, 2017

Dear Osgood,

Thank you so much. Your code was helpful.

It did exactly as you coded it but because I also wanted it to display my div's based on their unique record ID's, I played around with the code to get what I want.

Here is what I did.

I combined your code with that of BenPleysier (as seen above) to get the code below. With the code below, I am able to display each record div based on their unique id and also toggle the Plus and Minus buttons exactly the way I want.

<script>

function toggle_display(id) {

var e = document.getElementById(id);

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

e.style.display = 'none';

}

else

e.style.display = 'block';

}

var show_info = document.getElementsByClassName("show_info");

var count = show_info.length;

for(i = 0 ; i < 10 ; i++){

show_info.addEventListener('click', function () {

if (this.innerHTML == '<img src="images/minus.jpg" alt="Plus">') {

this.innerHTML = '<img src="images/plus.jpg" alt="Minus">';

} else {

this.innerHTML = '<img src="images/minus.jpg" alt="Plus">';

}

});

}

</script>

Thank you so so much.

To anyone with similar issues, kindly use the code as it applies to you case

Report · Aug 02, 2017

Just be aware that by 'hard coding' 10 into the script code below will only show a max of 9 hidden <div> regions.

for(i = 0 ; i < 10 ; i++)

The code below automatically counts the number of show_info anchor triggers, so if you add more hidden <div> regions at a later stage it gets dealt with, without having to update the number 10.

var count = show_info.length;

Report · Aug 03, 2017

Dear Osgood,

Thank you so much for the info. I have corrected it on all the pages as you advised.

Please forgive my additional request. Like I said the code it working perfectly well as I want but I just observed something strange. I think it's because of the href="#" .

When I click on any of the Plus or Minus icons within the visible part of the screen, the focus of the screen and div will display fixed but when I scroll now down to the hidden part of the page and click on the Plus icon, the div will actually open but the focus of the screen will move from the hidden point where I clicked on to the top part of the screen. I will now have to scroll down again to view the div that opened below.

Please is there anything I can do to keep the screen focus and fixed on the hidden part of the screen or page where I clicked on even though it's the last row on the table, say the 100th row.

Thank you

Report · Aug 03, 2017

Try adding return false to the script:

var show_info = document.getElementsByClassName("show_info");

var count = show_info.length;

for(i = 0 ; i < 10 ; i++){

show_info.addEventListener('click', function () {

if (this.innerHTML == '<img src="images/minus.jpg" alt="Plus">') {

this.innerHTML = '<img src="images/plus.jpg" alt="Minus">';

} else {

this.innerHTML = '<img src="images/minus.jpg" alt="Plus">';

}

return false;

});

}

</script>

Report · Aug 03, 2017

Thank you so much Osgood but the addition of the return false didn't resolve the issue.

A little more please....

Report · Aug 03, 2017

Yes, Im not sure why that is not working, maybe in the wrong place - add the return false to the onclick event in the anchor tags like below:

onclick="toggle_display('content1'); return false;"

Report · Aug 03, 2017

osgood_ wrote
Yes, Im not sure why that is not working, maybe in the wrong place - add the return false to the onclick event in the anchor tags like below:
onclick="toggle_display('content1'); return false;"

The additional code in red below should work if you dont want to add the return false to every single anchor tag:

var show_info = document.getElementsByClassName("show_info");

var count = show_info.length;

for(i = 0 ; i < count ; i++){

show_info.addEventListener('click', function (event) {

event.preventDefault();

if (this.innerHTML == '<img src="images/minus.jpg" alt="Plus">') {

this.innerHTML = '<img src="images/plus.jpg" alt="Minus">';

} else {

this.innerHTML = '<img src="images/minus.jpg" alt="Plus">';

}

});

}

Report · Aug 03, 2017

Thank you so much Osgood.

It's OK now. The two snippets are working perfectly well.

I am so grateful.

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

1 Correct answer