Show/Hide div

**NightLightW** · 14th Apr 2012, 02:47 PM

Hello,
i working on school project. So i need to create table for stuff. Also when you click on the name or

need to show additional div for info about prof.
here is table

when you click on Profesor4 info will show in profesor1

is need to show info in clicked profesor4 no profesor 1 here is code, css and javascript

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script language="JavaScript">
            function toggle(id) {
                var state = document.getElementById(id).style.display;
                if (state == 'block') {
                    document.getElementById(id).style.display = 'none';
                } else {
                    document.getElementById(id).style.display = 'block';
                }
            }
        </script>

        

        <style>

            .tbody{
                border-collapse: collapse;
                width: 500px;
                word-spacing: 2px;
                /**position:  center; */
                font-family:  sans-serif;
                font-size: 18px;
                text-align: center;
            }
            .td{
                border-style:  double;
                border-width: 1px;
                padding: 2px 2px 2px 2px ;

            }
            
            .subject{
                border-width: 1px;
                border-style: double;
            }


            #main{
                width:500px;
                height: 20px;
                background: lightblue;
            }
            #hidden {
                width: auto;
                height:20px;
                background: aliceblue;
                display: none;
            }
            #img{
                /**padding-left: 10px;
                
                padding-right: 5px;
                padding-left: 5px;
                **/
                float: right;
            }
        </style>

        <title>Probna tabela</title>
    </head>
    <body>
        <table class="tbody" >
            <tbody>
                <tr>
                    <td class="td">pROFESOR</td>
                    <td class="td">Subject</td>
                </tr>

                <tr>
                    <td class="td">Profesor1<a href="#" onclick="toggle('hidden');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden">Info about prof.1</div></td>
                    <td class="subject" rowspan="4">Македонски Јазик</td>
                </tr>
                <tr><td class="td">Profesor2<a href="#" onclick="toggle('hidden');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden">Info about prof.2</div></td></tr>
                <tr><td class="td">profesor3<a href="#" onclick="toggle('hidden');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden">Info about prof.3</div></td></tr>
                <tr><td class="td">Profesor4<a href="#" onclick="toggle('hidden');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden">Info about prof.4</div>
                    </td></tr>
</table>

NightLightW Reviewed by NightLightW on 14th Apr 2012. Show/Hide div Hello, i working on school project. So i need to create table for stuff. Also when you click on the name or http://i.imgur.com/Xof8h.png need to show additional div for info about prof. here is table http://i.imgur.com/46tJw.jpg when you click on Profesor4 info will show in profesor1 http://i.imgur.com/LDxSN.jpg is need to show info in clicked profesor4 no profesor 1 here is code, css and javascript <!DOCTYPE html> <html> Rating: 5

**t3od0r** · 14th Apr 2012, 02:54 PM

in toggle('hidden') function you must set the id. The id must be unique on the page, you have the id "hidden" for all divs.
Try this:

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script language="JavaScript">
            function toggle(id) {
                var state = document.getElementById(id).style.display;
                if (state == 'block') {
                    document.getElementById(id).style.display = 'none';
                } else {
                    document.getElementById(id).style.display = 'block';
                }
            }
        </script>

        

        <style>

            .tbody{
                border-collapse: collapse;
                width: 500px;
                word-spacing: 2px;
                /**position:  center; */
                font-family:  sans-serif;
                font-size: 18px;
                text-align: center;
            }
            .td{
                border-style:  double;
                border-width: 1px;
                padding: 2px 2px 2px 2px ;

            }
            
            .subject{
                border-width: 1px;
                border-style: double;
            }


            #main{
                width:500px;
                height: 20px;
                background: lightblue;
            }
            #hidden {
                width: auto;
                height:20px;
                background: aliceblue;
                display: none;
            }
            #img{
                /**padding-left: 10px;
                
                padding-right: 5px;
                padding-left: 5px;
                **/
                float: right;
            }
        </style>

        <title>Probna tabela</title>
    </head>
    <body>
        <table class="tbody" >
            <tbody>
                <tr>
                    <td class="td">pROFESOR</td>
                    <td class="td">Subject</td>
                </tr>

                <tr>
                    <td class="td">Profesor1<a href="#" onclick="toggle('hidden1');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden1">Info about prof.1</div></td>
                    <td class="subject" rowspan="4">Македонски Јазик</td>
                </tr>
                <tr><td class="td">Profesor2<a href="#" onclick="toggle('hidden2');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden2">Info about prof.2</div></td></tr>
                <tr><td class="td">profesor3<a href="#" onclick="toggle('hidden3');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden3">Info about prof.3</div></td></tr>
                <tr><td class="td">Profesor4<a href="#" onclick="toggle('hidden4');"><img id="img" src="http://127.0.0.1/kadar/plus.png"/></a>
                        <div id="hidden4">Info about prof.4</div>
                    </td></tr>
</table>

**NightLightW** · 14th Apr 2012, 03:13 PM

okay now thanks very much. But the info is displayed immediately, I want to show info when clicked the professor or the image

or how can i do this on click to show info like this? Can you give some ex. code for this

this is web

Code:

http://nova.edu.mk/EN/learning_at_nova/high_school/faculty_and_staff.aspx

**Lock Down** · 15th Apr 2012, 04:13 PM

Just right click that page and view source to see how it is done.

**NightLightW** · 16th Apr 2012, 02:38 PM

I try this to view code of page but i don't have success. I don't understand JavaScript also try on local host but nothing. If anyone know how to do this i will pay for that

**soft2050** · 16th Apr 2012, 03:45 PM

To achieve a similar effect, you could use jquery UI dialog: http://jqueryui.com/demos/dialog

**NightLightW** · 16th Apr 2012, 04:25 PM

This dialog is for showing info about one thing. I need for more then 20 person info to show in different dialog box on click.
ex.

If i click on Professor 1 to show info about Professor1
if i click on Professor 2 to show info about Professor2.....
is something like this on picture

you can see i click on Anglea and i can view info about Anglea if i click on Aleksandar i can see info about him

Thanks to all who helped me and want to help

**VPSVolt** · 18th Apr 2012, 01:16 PM

Just right click the page. Save page as and then open it as a new site in Dreamweaver or your preferred code editing software and work the code down until all you are left with is the JS files and the code for the popout.

Thanks, VPSVolt.

**NightLightW** · 27th Apr 2012, 05:52 PM

@VPSVolt- thanks i will try with this solution

And can i combine JS files in one JS file?
I always edit code in NetBeans.

**b1gj4v** · 10th May 2012, 08:57 PM

im sure there are quite few jQuery plugins for this sort of thing. Have a look around.

Show/Hide div

Thread Tools

Display

Show/Hide div

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

[Vbulletin] Hide links in 1 forum and show in another..??

review - tastro.org new show/hide javascript and new posting platform

Hide / show remote file extension

How can I put option to show/hide Porn Section

show or hide javascript/jquery

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaCreator - create posts from...

themaRegister - register to forums...

themaLeecher - leech and manage...