Solved

Need help adjusting (or re-writing) a collapsible javascript menu

Posted on 2004-08-19
8
256 Views
Last Modified: 2012-05-05
I originally used this javascript to collapse tables, I've converted it somewhat to use with css but I need it altered a bit (or re-written) to work with my new project.

These are the changes I need:

1. I don't want to use checkboxes.
Instead of (un)ticking a checkbox to (collapse)expand the <div>, I want to click on the text (eg.'Firstbar-1') to (collapse)expand the <div>.

2. In front of every 'Firstbar-?' there is a 'plus' image. I need the image to change to a different ('minus') image when the <div> is expanded and back to the 'plus' image when the <div> is collapsed.

3. I need the javascript changed a little on certain pages.
(a). On the 'Index.html', 'Secondbar-1', and 'Secondbar-2' pages I need them to open with everything collapsed.
(b). On all the 'Subbar 1' pages I need them to open with the 'Firstbar-1' <div> section expanded and the rest collapsed.
(c). On all the 'Subbar 2' pages I need them to open with the 'Firstbar-2' <div> section expanded and the rest collapsed, etc.

4. I only want one <div> section expanded at a time.
For example: if the 'Firstbar-1' <div> section is expanded, when I click on 'Firstbar-2', it will expand and 'Firstbar-1' will collapse.

5. The javascript needs to be compatible with most major browsers. (ie. IE5.+/Mozilla 1.+/Opera 6.+)

Here is the html and the css:

===========
HTML CODE:
===========

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
      @import "sidebar-test.css";
</style>
<script type="text/javascript">
function showHideChkBox(chkBox,theTable)
{
if (chkBox.checked)
{ document.getElementById(theTable).style.display = 'block'; }
else
{
document.getElementById(theTable).style.display = 'none';
document.getElementById("chkBoxAll").checked = false
}
}
function showHideAll(chkBox,idpart)
{
var display;
if(chkBox.checked) { display = "";}
else { display = "none";}
    var tables = document.getElementsByTagName("DIV");
    var checkb = document.getElementsByTagName("INPUT");
    var i;
    for(i = 0; i < tables.length; i++){if(tables[i].id.indexOf(idpart) == 0) tables[i].style.display = display;}
    for(i = 0; i < checkb.length; i++){if(checkb[i].name == "chkBox") checkb[i].checked = chkBox.checked;}
}
function hideAll()
{
    var tables = document.getElementsByTagName("DIV");
    var idpart = 'tbl'
    for(i = 0; i < tables.length; i++){if(tables[i].id.indexOf(idpart) == 0) tables[i].style.display = "none";}
}
</script>
</head>
<body>
<!-- <body onload="hideAll();"> -->
<a><input type="image" id="chkBoxAll" name="chkBoxAll" value="checkbox" src="" alt="Click Here to hide all" onClick="showHideAll(this, 'tbl');"></a>
      <div id="sidepanel">
            <div class="navbar">
                        <div id="mainmenu">
                              <div class="div01">
                                    <a><input type="checkbox" id="chkBox" name="chkBox" value="checkbox" onClick="showHideChkBox(this, 'tbl-01');"><img src="images/plus.gif" width="10" height="10" />&nbsp;&nbsp;Firstbar-1</a>
                                    <div id="tbl-01">
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 1</a>
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 1</a>
                                    </div>
                              </div>
                              <div class="div02">
                                    <a><input type="checkbox" id="chkBox" name="chkBox" value="checkbox" onClick="showHideChkBox(this, 'tbl-02');"><img src="images/plus.gif" width="10" height="10" />&nbsp;&nbsp;Firstbar-2</a>
                                    <div id="tbl-02">
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 2</a>
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 2</a>
                                    </div>
                              </div>
                              <div class="div03">
                                    <a><input type="checkbox" id="chkBox" name="chkBox" value="checkbox" onClick="showHideChkBox(this, 'tbl-03');"><img src="images/plus.gif" width="10" height="10" />&nbsp;&nbsp;Firstbar-3</a>
                                    <div id="tbl-03">
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 3</a>
                                          <a href=""><img src="" width="10" height="10" />&nbsp;Subbar 3</a>
                                    </div>
                              </div>
                        </div>
                        <div class="menubar">
                              <a href="">Secondbar-1</a>
                              <a href="">Secondbar-2</a>
                        </div>
                  <p class="infobar">Updated: 18.08.2004</p>
            </div>

      </div>
</body>
</html>

==========
CSS CODE:
==========

body {
      font-size: 100%;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
}

/*
============= the sidepanel ============
*/
/* positioning and box property styles */

#sidepanel {
      position: absolute;
      top: 60px;
      left: 20px;
      width: 160px;
      height: auto;
      margin: 0 0 8px 0;
      font-size: 100%;
}
.navbar {
      border: 1px solid #091c5a;
      border-right: 0;
      border-top: 0;
      padding: 2px;
      width: 100%;
}
#tbl-01, #tbl-02, #tbl-03 {
      border-left: 1px dashed #091c5a;
      border-bottom: 1px dashed #091c5a;
      padding: 0;
      margin: 0 0 0 16px;
}

/* text and background styles */

#mainmenu, .menubar {
      color: #091c5a;
      font-size: 11px;
      padding: 0;
      background-color: #fff;
      width: 100%;
      margin: 0 0 8px 0;
}
#mainmenu a, .menubar a {
      color: #ff5800;;
      background-color: #fff;
      text-decoration: none;
      display: block;
      margin: 2px;
      padding: 2px;
      border: 1px solid #fff;
}
#mainmenu a:hover, .menubar a:hover {
      color: #ff5800;
      background-color: #fff;
      text-decoration: none ;
      border: 1px solid #ff5800;
      padding: 2px;
}
.infobar {
      font-size: 10px;
      color: #fff;
      width: 100%;
      background-color: #ff5800;
      border: 1px solid #091c5a;
      text-align: center;
      margin:0;
      padding: 1px 0 2px 0;
}
0
Comment
Question by:gadz
  • 4
  • 4
8 Comments
 
LVL 14

Expert Comment

by:ziffgone
ID: 11842126
This is what I have so far, but I have to go to work now, so the rest will have to wait until then:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
     font-size: 100%;
     font-family: Verdana, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
}

/*
============= the sidepanel ============
*/
/* positioning and box property styles */

#sidepanel {
     position: absolute;
     top: 60px;
     left: 20px;
     width: 160px;
     height: auto;
     margin: 0 0 8px 0;
     font-size: 100%;
}
.navbar {
     border: 1px solid #091c5a;
     border-right: 0;
     border-top: 0;
     padding: 2px;
     width: 100%;
}
#tbl-01, #tbl-02, #tbl-03 {
     border-left: 1px dashed #091c5a;
     border-bottom: 1px dashed #091c5a;
     padding: 0;
     margin: 0 0 0 16px;
}

/* text and background styles */

#mainmenu, .menubar {
     color: #091c5a;
     font-size: 11px;
     padding: 0;
     background-color: #fff;
     width: 100%;
     margin: 0 0 8px 0;
}
#mainmenu a, .menubar a {
     color: #ff5800;;
     background-color: #fff;
     text-decoration: none;
     display: block;
     margin: 2px;
     padding: 2px;
     border: 1px solid #fff;
}
#mainmenu a:hover, .menubar a:hover {
     color: #ff5800;
     background-color: #fff;
     text-decoration: none ;
     border: 1px solid #ff5800;
     padding: 2px;
}
.infobar {
     font-size: 10px;
     color: #fff;
     width: 100%;
     background-color: #ff5800;
     border: 1px solid #091c5a;
     text-align: center;
     margin:0;
     padding: 1px 0 2px 0;
}
</style>
<script type="text/javascript">
function showHideChkBox(chkBox,theTable)
{
if (document.images[chkBox].src.indexOf('plus') > 0){
    document.getElementById(theTable).style.display = 'block';
    document.images[chkBox].setAttribute('src','minus.gif');
    document.getElementById('chkBoxAll').setAttribute('src','minus.gif');
 }
else{
    document.getElementById(theTable).style.display = 'none';
    document.images[chkBox].setAttribute('src','plus.gif');
    document.getElementById('chkBoxAll').setAttribute('src','plus.gif');
}
}
function showHideAll(chkBox,idpart)
{
var show;
if(chkBox.src.indexOf('plus') > 0) { show = "";chkBox.setAttribute('src','minus.gif')}
else { show = "none";chkBox.setAttribute('src','plus.gif')}
    var tables = document.getElementsByTagName("DIV");
    var checkb = document.getElementsByTagName("img");
    for(i = 0; i < tables.length; i++){if(tables[i].id.indexOf(idpart) == 0) tables[i].style.display = show;}
    for(i = 0; i < checkb.length; i++){
          if(chkBox.src.indexOf("minus") > 0){ checkb[i].setAttribute('src','minus.gif');}
          else{checkb[i].setAttribute('src','plus.gif');}}
}
function hideAll()
{
    var tables = document.getElementsByTagName("DIV");
    var idpart = 'tbl'
    for(i = 0; i < tables.length; i++){if(tables[i].id.indexOf(idpart) == 0) tables[i].style.display = "none";}
}
</script>
</head>
<body onload="hideAll();">
<!-- <body > -->
<a><input type="image" id="chkBoxAll" name="chkBoxAll" value="checkbox" src="plus.gif" alt="Click Here to hide all" onClick="showHideAll(this, 'tbl');"></a>
     <div id="sidepanel">
          <div class="navbar">
                    <div id="mainmenu">
                         <div class="div01">
                              <a><img name="open1" src="plus.gif" width="10" height="10" onClick="showHideChkBox(this.name, 'tbl-01');" />&nbsp;&nbsp;Firstbar-1</a>
                              <div id="tbl-01">
                                   <a href="#">&nbsp;Subbar 1</a>
                                   <a href="#">&nbsp;Subbar 1</a>
                              </div>
                         </div>
                         <div class="div02">
                              <a><img name="open2" src="plus.gif" width="10" height="10" onClick="showHideChkBox(this.name, 'tbl-02');" />&nbsp;&nbsp;Firstbar-2</a>
                              <div id="tbl-02">
                                   <a href="#">&nbsp;Subbar 2</a>
                                   <a href="#">&nbsp;Subbar 2</a>
                              </div>
                         </div>
                         <div class="div03">
                              <a><img name="open3" src="plus.gif" width="10" height="10" onClick="showHideChkBox(this.name, 'tbl-03');" />&nbsp;&nbsp;Firstbar-3</a>
                              <div id="tbl-03">
                                   <a href="#">&nbsp;Subbar 3</a>
                                   <a href="#">&nbsp;Subbar 3</a>
                              </div>
                         </div>
                    </div>
                    <div class="menubar">
                         <a href="#">Secondbar-1</a>
                         <a href="#">Secondbar-2</a>
                    </div>
               <p class="infobar">Updated: 18.08.2004</p>
          </div>

     </div>
</body>
</html>

Regards...
0
 
LVL 2

Author Comment

by:gadz
ID: 11846377
Ah, I tried to figure out changing the checkboxes to images but as I know very little about javascript (I got major help for the above script, was actually pretty much written for me) i couldn't quite get it.

Great, that's point 2 (and part of point 1) taken care of.

Is it even possible to be able to click on the text (eg.'Firstbar-1') to expand(collapse) the sections instead of having to click the image (eg. plus.gif/minus.gif)? I still want the images there to change back and forth as the sections are expanded(collapsed), but it would be better if the text could be used instead of the images as they make up a greater 'clickable' area.

One other point I forgot to add:

6. When a section is expanded, I want the text 'Firstbar-?' in bold, and when collapsed back to normal.

Thanks for the help so far :)
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11851993
Ok, I think I got it all covered.

Note: For point 3 in your question above to work, you need a substring in all subbar 1,subbar 2, and subbar 3 pages for the script to recognize. For example, you can have "subbar1" in all subbar 1 pages like so: "subbar1_help.htm", "subbar1_about_.htm" etc. For what ever substring you use, change the showPage function to look for that substring and simply change the "if" statement like so:

if(whPage.indexOf('subbar_page_substring_here') > -1){
~~
}

Repeat for each "if" and "else if" statement. Add more "else if" statements for more subbar pages, if you create more.

Hope that makes sense, here's the code, (many changes were made to both the javascript and HTML code):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
     font-size: 100%;
     font-family: Verdana, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
}

/*
============= the sidepanel ============
*/
/* positioning and box property styles */

#sidepanel {
     position: absolute;
     top: 60px;
     left: 20px;
     width: 160px;
     height: auto;
     margin: 0 0 8px 0;
     font-size: 100%;
}
.navbar {
     border: 1px solid #091c5a;
     border-right: 0;
     border-top: 0;
     padding: 2px;
     width: 100%;
}
#tbl-01, #tbl-02, #tbl-03 {
     border-left: 1px dashed #091c5a;
     border-bottom: 1px dashed #091c5a;
     padding: 0;
     margin: 0 0 0 16px;
}

/* text and background styles */

#mainmenu, .menubar {
     color: #091c5a;
     font-size: 11px;
     padding: 0;
     background-color: #fff;
     width: 100%;
     margin: 0 0 8px 0;
}
#mainmenu a, .menubar a {
     color: #ff5800;;
     background-color: #fff;
     text-decoration: none;
     display: block;
     margin: 2px;
     padding: 2px;
     border: 1px solid #fff;
}
#mainmenu a:hover, .menubar a:hover {
     color: #ff5800;
     background-color: #fff;
     text-decoration: none ;
     border: 1px solid #ff5800;
     padding: 2px;
}
.infobar {
     font-size: 10px;
     color: #fff;
     width: 100%;
     background-color: #ff5800;
     border: 1px solid #091c5a;
     text-align: center;
     margin:0;
     padding: 1px 0 2px 0;
}
</style>
<script type="text/javascript">
function showHideChkBox(chkBox,theTable,hrefId)
{
if (document.images[chkBox].src.indexOf('plus') > -1){
    document.getElementById(theTable).style.display = 'block';
    document.images[chkBox].setAttribute('src','minus.gif');
    document.getElementById('chkBoxAll').setAttribute('src','minus.gif');
    hideAll(theTable);
 }
else{
    document.getElementById(theTable).style.display = 'none';
    document.images[chkBox].setAttribute('src','plus.gif');
    document.getElementById('chkBoxAll').setAttribute('src','plus.gif');
}
var nobold = document.getElementsByTagName('span');
   for(i = 0;i < nobold.length; i++){
     if(nobold[i].id == hrefId){
          nobold[i].style.fontWeight = 'bold';
     }
     else{
          nobold[i].style.fontWeight = 'normal';
     }
   }
}
function showHideAll(chkBox,idpart)
{
var show;
if(chkBox.src.indexOf('plus') > 0) { show = "";chkBox.setAttribute('src','minus.gif')}
else { show = "none";chkBox.setAttribute('src','plus.gif')}
    var tables = document.getElementsByTagName("DIV");
    var checkb = document.getElementsByTagName("img");
    for(i = 0; i < tables.length; i++){if(tables[i].id.indexOf(idpart) == 0) tables[i].style.display = show;}
    for(i = 0; i < checkb.length; i++){
          if(chkBox.src.indexOf("minus") > 0){ checkb[i].setAttribute('src','minus.gif');}
          else{checkb[i].setAttribute('src','plus.gif');}}
}
function hideAll(show)
{
   
    var tables = document.getElementsByTagName("DIV");
    var imgs = document.getElementsByTagName("img");
    var idpart = 'tbl'
   if(show){
       var num = show.substr(show.length-1,show.length);
       var chimg = "open"+num;
       for(i = 0; i < tables.length; i++){
           if((tables[i].id.indexOf(show) != 0) && (tables[i].id.indexOf(idpart) == 0)){
                 tables[i].style.display = "none";
           }
       }
       for(i = 0; i < imgs.length; i++){
            if((imgs[i].name.indexOf('open') == 0) && (imgs[i].name != chimg)){
                 imgs[i].setAttribute('src','plus.gif');
            }
       }
   }
   else{
    for(i = 0; i < tables.length; i++){
           if(tables[i].id.indexOf(idpart) == 0){
               tables[i].style.display = "none";
           }
    }
   }
}
function showPage(){
    var whPage = window.location.href.toString();
    if(whPage.indexOf('subbar1') > -1){
       showHideChkBox('open1','tbl-01','firstbar1');      
    }
    else if(whPage.indexOf('subbar2') > -1){
       showHideChkBox('open1','tbl-02','firstbar2');      
    }
    else if(whPage.indexOf('subbar3') > -1){
       showHideChkBox('open1','tbl-03','firstbar3');      
    }
    else{
       hideAll();
    }
}

</script>
</head>
<body onload="showPage();">
<!-- <body > -->
<a><img name="chkBoxAll" id="chkBoxAll" name="chkBoxAll" value="checkbox" src="plus.gif" alt="Click Here to hide all" onClick="showHideAll(this, 'tbl');"></a>
     <div id="sidepanel">
          <div class="navbar">
                    <div id="mainmenu">
                         <div class="div01">
                              <a href="javascript:showHideChkBox('open1', 'tbl-01','firstbar1');"><img name="open1" id="open1" src="plus.gif" width="10" height="10" border="0" onClick="showHideChkBox(this.name, 'tbl-01','firstbar1');" /><span id="firstbar1">&nbsp;&nbsp;Firstbar-1</span></a>
                              <div id="tbl-01">
                                   <a href="#">&nbsp;Subbar 1</a>
                                   <a href="#">&nbsp;Subbar 1</a>
                              </div>
                         </div>
                         <div class="div02">
                              <a id="firstbar2" href="javascript:showHideChkBox('open2', 'tbl-02','firstbar2');"><img name="open2" id="open2" src="plus.gif" width="10" height="10" border="0" onClick="showHideChkBox(this.name, 'tbl-02','firstbar2');" /><span id="firstbar2">&nbsp;&nbsp;Firstbar-2</span></a>
                              <div id="tbl-02">
                                   <a href="#">&nbsp;Subbar 2</a>
                                   <a href="#">&nbsp;Subbar 2</a>
                              </div>
                         </div>
                         <div class="div03">
                              <a href="javascript:showHideChkBox('open3', 'tbl-03','firstbar3');"><img name="open3" id="open3" src="plus.gif" width="10" height="10" border="0" onClick="showHideChkBox(this.name, 'tbl-03','firstbar3');" /><span id="firstbar3">&nbsp;&nbsp;Firstbar-3</span></a>
                              <div id="tbl-03">
                                   <a href="#">&nbsp;Subbar 3</a>
                                   <a href="#">&nbsp;Subbar 3</a>
                              </div>
                         </div>
                    </div>
                    <div class="menubar">
                         <a href="#">Secondbar-1</a>
                         <a href="#">Secondbar-2</a>
                    </div>
               <p class="infobar">Updated: 18.08.2004</p>
          </div>

     </div>
</body>
</html>

Any questions, just ask.

Regards...
0
 
LVL 2

Author Comment

by:gadz
ID: 11858268
Thanks it works real nice!
Only 2 little things need a little adjusting:

1. When 'Firstbar' is expanded it turns bold, however, when collapsed it also stays bold.

Actually would it be possible to show 2 versions of the javascript so I have the option to change it?
(a) one that makes 'Firstbar-?' turn bold/normal when it is expanded/collapsed
(b) one that doesn't turn bold but just stays normal when clicked

2. The show/hide all function actually isn't needed, but if I take the following out of the html code:

<a><img name="chkBoxAll" id="chkBoxAll" value="checkbox" src="plus.gif" alt="Click Here to hide all" onClick="showHideAll(this, 'tbl');"></a>

the script doesn't work properly anymore.

That's about it.
Thanks again for taking the time to help with this.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 2

Author Comment

by:gadz
ID: 11858328
The "2 versions of the javascript" was an after-thought while writing the above comment, I looked again at the javascript posted and saw that all I have to do is comment out the "if" and "else" statement on the "showHideChkBox" function.
0
 
LVL 14

Accepted Solution

by:
ziffgone earned 500 total points
ID: 11859150
If you want to take out the show/hide all html code, simply comment out or remove the following lines in the showHideChkBox function, (note the reference to "chkBoxAll"):

document.getElementById('chkBoxAll').setAttribute('src','minus.gif');
and:
document.getElementById('chkBoxAll').setAttribute('src','plus.gif');

These are located in the first if/else statements of the function.


Now here is the revised showHideChkBox function to fix the bolding/nobold:

function showHideChkBox(chkBox,theTable,hrefId)
{
if (document.images[chkBox].src.indexOf('plus') > -1){
    document.getElementById(theTable).style.display = 'block';
    document.images[chkBox].setAttribute('src','minus.gif');
    document.getElementById(hrefId).style.fontWeight = 'bold';
    // document.getElementById('chkBoxAll').setAttribute('src','minus.gif');
    hideAll(theTable);
 }
else{
    document.getElementById(hrefId).style.fontWeight = 'normal';
    document.getElementById(theTable).style.display = 'none';
    document.images[chkBox].setAttribute('src','plus.gif');
    // document.getElementById('chkBoxAll').setAttribute('src','plus.gif');
}
var nobold = document.getElementsByTagName('span');
   for(i = 0;i < nobold.length; i++){
     if((nobold[i].id == hrefId) && (document.images[chkBox].src.indexOf('minus') > -1)){
          nobold[i].style.fontWeight = 'bold';
     }
     else{
          nobold[i].style.fontWeight = 'normal';
     }
   }
}

Previously, "firstbar-1" only went back to nonbold text after you clicked on the next bar. But it's fixed now, just replace the current function with the new one above.

Regards...
0
 
LVL 2

Author Comment

by:gadz
ID: 11859364
Works nicely.
Thanks.
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11862011
No problem gadz, it was a pleasure. Nice bit of code anyway.

Regards...
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now