Jump to content

Recommended Posts

Hi,

 

I'm trying to setup a sidenav with multiple accordion dropdowns. The first one seems to work fine but the rest just reopen the first in the list. Anyone any idea what I'm doing wrong? It may well be blatantly obvious as I'm no expert!

Thanks, Dave.

The code I'm using (css) is:

____________________________________________________________________________________

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:140px;">
<a href="index.php">Home</a>

 

<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a>
<div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="one.php">one</a>
<a href="two.php">two</a>
<a href="three.php">three</a>
</div>

</div>

 

<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a>
<div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="four.php">four</a>
<a href="five.php">five</a>
<a href="six.php">six</a>
</div>

</div>

 

<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Second group<i class="fa fa-caret-down"></i></a>
<div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="four.php">four</a>
<a href="five.php">five</a>
<a href="six.php">six</a>
</div>

</div>

 

<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Third group<i class="fa fa-caret-down"></i></a>
<div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="seven.php">seven</a>
<a href="eight.php">eight</a>
<a href="nine.php">nine</a>
</div>

</div>

<a href="https://twitter.com/my_page" target="_blank"><img src="/img/twitter.gif" width="100px"></a>
<a href="https://www.facebook.com/my_page/" target="_blank"><img src="/img/facebook.gif" width="100px"></a>

 

</nav>

____________________________________________________________________________________

Edited by Dave Stewart
Link to comment
Share on other sites

Unless the JavaScript, yes! JavaScript code, not just css, is setup to go to the next sibling div element from the anchor link with onclick event, it won't work, if its targeting id, then that's another problem because 'id' names MUST BE unique within a page, unlike what you currently have which are duplicate 'id' names.

Link to comment
Share on other sites

Oops, sorry, I forgot to add the script. It is indeed there, just under the bottom of the code I previously posted....

</nav>

<script>
function w3_open()
{
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close()
{
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
However, as I have 'included' a seperate HTML file with all the nav coding along with the javascript, but this may easily be completely wrong.

Any help is greatly appreciated,

thanks.

Dave

Link to comment
Share on other sites

Oh, so it is, sorry. Confused myself with too many parts. I looked at the page on here again & changed it to:

</nav>

<script>
function myAccFunc()
{
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1)
{
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
}
else
{
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}

function myDropFunc()
{
var x = document.getElementById("demoDrop");
if (x.className.indexOf("w3-show") == -1)
{
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
}
else
{
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
</script>

which is the script it should be, I hope! But still get the same result.

Link to comment
Share on other sites

Add 'this' to the function called by anchor link event onclick

<a onclick="myAccFunc(this)" href="#">First group<i class="fa fa-caret-down"></i></a>

Then you need to ref that specifically clicked element, transverse down to next sibling element and change that elements classname

 function myAccFunc(elem)//amended by dsonesuk
            {
                var x = elem.nextElementSibling;//amended by dsonesuk
                if (x.className.indexOf("w3-show") == -1)
                {
                    x.className += " w3-show";
                    x.previousElementSibling.className += " w3-green";
                }
                else
                {
                    x.className = x.className.replace(" w3-show", "");
                    x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-green", "");
                }
            }
Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Aaarrgghh, nightmare. I still can't get it to work. :facepalm:
Instead of trying to post the coding I'm trying to get working, perhaps you'd rather look at the page in action? It's at www.edinweb.org.

I'd really appreciate any ideas on what I'm doing. I use Dreamweaver & it objects a lot to some lines of it as well.

Thanks in advance.

 

Actually, I've just realised what you mentioned earlier. The lines in the coding are indeed replicated, but that's the refference to the W3 CSS scripts. How would I change those? Unless I copied the coding from W3's & made more with different names. That might be seen as theft though. Suppose I could refer them in comments for copyright or something.

Edited by Dave Stewart
Link to comment
Share on other sites

Your JavaScript code is exactly as before. also your html coding is in a mucking fuddle.

 

IF YOU HAVE MORE THAN ONE OF THESE main important HTML TAGS showing when you view the source of you web page.

 

<!doctype html>
<html>
<head>

</head>

<body>

</body>

</html>

 

You are doing it wrong!

Link to comment
Share on other sites

I went through the entire site & checked the basic html section as you noted, but couldn't find the ones you talked about. I did find the older function codes you saw & removed them. With your assistance It all now works as I hoped it would. Thanks a LOT for your help. Greatly appreciated. Dave.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...