[JavaScript] Sidebar

[JayC]

Hey Devbest I am trying to set it so that my navigator is set to closed instead of open.. Here is the javascript code:

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='+';
var hideText='-';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+hideText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').show();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link text depending on whether the element is shown or hidden
if ($(this).text()==showText) {
$(this).text(hideText);
$(this).parent().next('.toggle').slideDown('slow');
}
else {
$(this).text(showText);
$(this).parent().next('.toggle').slideUp('slow');
}

// return false so any link destination is not followed
return false;

});
});

Here is the navigator code:

<h3><font color="lightblue">Navigator</font></h3>
        <ul class="toggle"><hr>
        <h3><font color="silver">General</h3></font>
        <ul class="toggle">
            <li class="icn_tags"><a href="%www%/me.php"><font color="white">Me</a></li></font>
            <li class="icn_tags"><a href="%www%/community.php"><font color="white">Community</a></li></font>
            <li class="icn_tags"><a href="%www%/vip"><font color="white">Shop</a></li></font>
        </ul><hr>
        <h3><font color="silver">Community</h3></font>
        <ul class="toggle">
            <li class="icn_profile"><a href="%www%/articles"><font color="white">News</a></li></font>
            <li class="icn_profile"><a href="%www%/topstats.php"><font color="white">Top Stats</a></li></font>
            <li class="icn_profile"><a href="%www%/tos.php"><font color="white">Terms of Service</a></li></font>
            <li class="icn_profile"><a href="%www%/rotw.php"><font color="white">ROTW Info</a></li></font>
            </ul><hr>
        <h3><font color="silver">Shop</h3></font>
        <ul class="toggle">
            <li class="icn_profile"><a href="%www%/badgeshop.php"><font color="white">Badge Shop</a></li></font>
            <li class="icn_profile"><a href="%www%/pixels.php"><font color="white">Pixel Shop</a></li></font>
            <li class="icn_profile"><a href="%www%/coins.php"><font color="white">Credit Shop</a></li></font>
            <li class="icn_profile"><a href="%www%/vippoints.php"><font color="white">Shell Shop</a></li></font>
            </ul><hr>
            <h3><font color="silver">Staff</h3></font>
        <ul class="toggle">
            <li class="icn_profile"><a href="%www%/vipmembers.php"><font color="white">VIP Members</a></li></font>
            <li class="icn_profile"><a href="%www%/experts.php"><font color="white">eXperts</a></li></font>
            <li class="icn_profile"><a href="%www%/events.php"><font color="white">Events</a></li></font>
            <li class="icn_profile"><a href="%www%/community/staff"><font color="white">Management</a></li></font>
            </ul><hr>
            <h3><font color="silver">Extras</h3></font>
        <ul class="toggle">
            <li class="icn_profile"><a href="%www%/tinychat.php"><font color="white">Tinychat</a></li></font>
            <li class="icn_profile"><a href="%www%/lottery.php"><font color="white">Lottery</a></li></font>
            <li class="icn_profile"><a href="%www%/vault.php"><font color="white">Vault</a></li></font>
            </ul><hr>
            <?php if ($users->hasFuse(USER_ID, 'fuse_housekeeping_login')) { ?>
            <h3><font color="red">Housekeeping</h3></font>
            <li class="icn_profile"><a href="%www%/allseeingeye/index.php"><font color="white">HouseKeeping</a></li></font>
            <?php } ?><br>

Image:

 

[Magic]

What do you mean with closed and open? As in when it's not clicked it's not there?

 

[JayC]

As when the webpage loads the navigator is open, i want it to be set to closed

 

[Sysode]

As when the webpage loads the navigator is open, i want it to be set to closed

Just adjust that in your CSS? Wrap your entire navigater (whatever the hell you're calling it) in <section class="nav"></section> and then in your CSS add this:

.nav {display:none;}

Then it is hidden, until javascript tells it otherwise.

 

[JayC]

Just adjust that in your CSS? Wrap your entire navigater (whatever the hell you're calling it) in <section class="nav"></section> and then in your CSS add this:

.nav {display:none;}

Then it is hidden, until javascript tells it otherwise.

Well that would just hide the box and make the whole display hidden, what I want to do is make it closed.. heres some pictures to help:

What it looks like now...


What I want it to look like when you reload the webpage:

 

[Snappy]

I'm no pro but you could use something simple like when the div (navigator) is clicked it will show with some simple jquery when I get on my laptop I can get the code I used

 

[Weasel]

You must be registered for see links

Same idea, make the middle part a hidden div, and on click make it slide down.

 

[JayC]

Is anyone understanding what I am trying to ? My slide down ALREADY works.. I can already open and close all the tabs and things like I want to... but the problem is when you load the page the navigator is already set to OPEN I want it so that it starts closed, and then the jquery will run as normal

 

[Weasel]

Under document.ready, add:

$("a.toggleLink").trigger('click');

 

[JayC]

Heres a video also of what im trying to do:

You must be registered for see links

Edit:
That did not work^

 

[Sysode]

You can hide the .toggle class, which hides it all besides the header. The only issue is, you'll have to recode the javascript as it'll reverse the +/- when opening/closing a section.

 

[Weasel]

// hide all of the elements with a class of 'toggle'
$('.toggle').show();

that does not hide all elements. hide() does.

 

[JayC]

// hide all of the elements with a class of 'toggle'
$('.toggle').show();

that does not hide all elements. hide() does.

Yeah you're on the right track to fix my problem! So now what it does when I switched .show to .hide (which i have already tried) it like broke.. It starts with "Navigator -" when its already closed, then I click the "-" and it switches to "+" but doesn't do anything, and then click it again back to "-" and then it works.

 

[Markshall]

I wouldn't bother using .hide() and .show(), just use .toggle().

 

[JayC]

Right but the javascript is using both?

 

[Weasel]

Right but the javascript is using both?

Toggle does both hide and show. Like the name says, it toggles between them both. If you hide all the div's by default in the CSS (make a class named "hidden" with display: none; ), you don't have to hide them all first in the javascript, and you can use toggle to show/hide them.

 

[Sysode]

Toggle does both hide and show. Like the name says, it toggles between them both. If you hide all the div's by default in the CSS (make a class named "hidden" with display: none; ), you don't have to hide them all first in the javascript, and you can use toggle to show/hide them.

Which is essentially what I said when I first posted. Guess should look in to the actual code next time, I wasn't aware he was using .hide()/.show() until now.

 

[JayC]

Fixed it. Close Thread - Thanks guys

 

[Markshall]

@JayCustom , I know you said you have fixed it and I have closed the thread due to your request, but this is how I would have done it. The code is a lot cleaner and simplified.

HTML:

<h3><font color="lightblue">Navigator</font></h3>

<hr>

<h3><font color="silver">General</font> <a href="#" data-navsection="general"></a></h3>
<ul class="toggle" id="nav_general">
    <li class="icn_tags"><a href="%www%/me.php"><font color="white">Me</font></a></li>
    <li class="icn_tags"><a href="%www%/community.php"><font color="white">Community</font></a></li>
    <li class="icn_tags"><a href="%www%/vip"><font color="white">Shop</font></a></li>
</ul>

<hr>

<h3><font color="silver">Community</font> <a href="#" data-navsection="community"></a></h3>
<ul class="toggle" id="nav_community">
    <li class="icn_profile"><a href="%www%/articles"><font color="white">News</font></a></li>
    <li class="icn_profile"><a href="%www%/topstats.php"><font color="white">Top Stats</font></a></li>
    <li class="icn_profile"><a href="%www%/tos.php"><font color="white">Terms of Service</font></a></li>
    <li class="icn_profile"><a href="%www%/rotw.php"><font color="white">ROTW Info</font></a></li>
</ul>

<hr>

<h3><font color="silver">Shop</font> <a href="#" data-navsection="shop"></a></h3>
<ul class="toggle" id="nav_shop">
    <li class="icn_profile"><a href="%www%/badgeshop.php"><font color="white">Badge Shop</font></a></li>
    <li class="icn_profile"><a href="%www%/pixels.php"><font color="white">Pixel Shop</font></a></li>
    <li class="icn_profile"><a href="%www%/coins.php"><font color="white">Credit Shop</font></a></li>
    <li class="icn_profile"><a href="%www%/vippoints.php"><font color="white">Shell Shop</font></a></li>
</ul>

<hr>

<h3><font color="silver">Staff</font> <a href="#" data-navsection="staff"></a></h3>
<ul class="toggle" id="nav_staff">
    <li class="icn_profile"><a href="%www%/vipmembers.php"><font color="white">VIP Members</font></a></li>
    <li class="icn_profile"><a href="%www%/experts.php"><font color="white">eXperts</font></a></li>
    <li class="icn_profile"><a href="%www%/events.php"><font color="white">Events</font></a></li>
    <li class="icn_profile"><a href="%www%/community/staff"><font color="white">Management</font></a></li>
</ul>

<hr>

<h3><font color="silver">Extras</font> <a href="#" data-navsection="extras"></a></h3>
<ul class="toggle" id="nav_extras">
    <li class="icn_profile"><a href="%www%/tinychat.php"><font color="white">Tinychat</font></a></li>
    <li class="icn_profile"><a href="%www%/lottery.php"><font color="white">Lottery</font></a></li>
    <li class="icn_profile"><a href="%www%/vault.php"><font color="white">Vault</font></a></li>
</ul>

<hr>

<?php if ($users->hasFuse(USER_ID, 'fuse_housekeeping_login')) { ?>
    <h3><font color="red">Housekeeping</font></h3>
    <li class="icn_profile"><a href="%www%/allseeingeye/index.php"><font color="white">HouseKeeping</font></a></li>
<?php } ?>

and your JavaScript/jQuery:

<script type="text/javascript">
var hideLinkText = '-',
    showLinkText = '+';
  
$(function(){
    $('[data-navsection]').text(hideLinkText).each(function(i, a) {
        $(a).on('click', function(e) {
            e.preventDefault();
          
            var selectedNav = 'nav_' + $(a).data('navsection');
          
            $('#' + selectedNav).slideToggle();
          
            $(a).text(($(a).text()===hideLinkText) ? showLinkText : hideLinkText);
          
            return false;
        });
    });
});
</script>