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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Like I said id ref should be singular, any multiple duplicate id will be ignored after the first encounted, the first will carry out what is asked for by the script.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...