A slider problem.

1

Hi all !

I have created a fiddle of a css or possibly jquery issue that I am facing. In the close position, the slider tab displays the text for the open and close positions simultaneously.

I request anyone to have a look and suggest a resolve.

fiddle: https://jsfiddle.net/ajoo/totym83v/3/

Thanks.

2

The problem seems to be here:

	$("#toggle a").click(function () {
		$("#toggle a").toggle();
		var state = $('#close').css('display');
		//alert(state);
		if(state === 'none') $('#close').css('display','block');
		if(state === 'block') $('#close').css('display','none');
	});

The state value always stays the same. I think one easier solution might be to add a class value called opened and closed and add it to the #panel div element depending on what state the slider is in. The selector style rule for that div will always be something like #panel.opened or #panel.closed.

In your CSS, you can have the following style rules that will toggle the visibility of your Open or Close links appropriately:

#panel.opened li#toggle a.open {
    display: none;
}
#panel.opened li#toggle a.close {
   display: block;
}
#panel.closed li#toggle a.open {
    display: block;
}
#panel.closed li#toggle a.close {
   display: none;
}

You can optimize these selectors afterwards, but that should give you the general gist of what I’m describing. What do you think about this approach?

:smile:

3

:smiley:Wow ! Hi Kirupa,

Thanks for that reply. This slider issue is haunting me since the last few days and I am glad to receive a reply from The Kirupa !! .Please bear in mind that I have limited knowledge of css while reading my reply.

Are you saying that I need not bother with the jquery at all and that the changes should be made in css. Why do we need both panel.opened and panel.closed ? Doesn’t one state automatically signify another? Where should I put panel.opened and panel.closed in the HTML ? What about the tab a.close and tab a.open classes? Won’t they be needed anymore ( their display attributes ) then?

I am actually quite confused :confused: by your reply as I guess I should be - the reply coming from an expert !! :sunglasses:

Please help clarify some more.
Thanks loads !

4

The reason is that you are using the closed and opened class values as signals to our CSS to indicate the slider position. You could definitely just use one, but I prefer being explicit about what happens in each state. It’s just personal preference :slight_smile:

I’m a bit swamped right now to solve your problem fully, but I’ll take a look in a little bit - unless somebody else jumps in first!

5

Hi Kirupa,

Thanks loads for the reply.

I too will continue to try and sort this out. If I am able to find a solution i’ll definitely post it here. Meanwhile I request some other experts to also kindly have a look to resolve this issue.

Thanks loads.

6

Hi Kirupa and all !

Reducing the slider to an even more minimal state, I realize that the issue is an initial condition problem where somehow initially both the open and close button texts show up together. If I can get the right text to show up or rather get the wrong text to somehow disappear initially, then the issue would be solved.

Here is the new link : https://jsfiddle.net/ajoo/totym83v/4/

Still, I am unable, with my limited knowledge of css, to solve this even after numerous hit and trials. Kindly find some time to help me fix this. I am sure it would be easy for the experts now.

Thanks all !

7

This was a fun one! I simplified your code a bit to avoid having extra logic for toggling the appearance of the Log-in and Close text. Instead, I tied the toggling logic to the menu opening and closing functions. Your revised JS would look like this:

$(document).ready(function() {

    var isMenuOpen = false;

    // Expand Panel
    $("#open").click(function() {
        $("div#panel").slideDown("slow");
        isMenuOpen = true;

        $('#close').css('display', 'block');
        $('#open').css('display', 'none');
    });

    // Collapse Panel
    $("#close").click(function() {
        $("div#panel").slideUp("slow");

        isMenuOpen = false;

        $('#close').css('display', 'none');
        $('#open').css('display', 'block');
    });
});

To avoid the text flashing on or off just when you load the page, I added the following style rules as well:

#open {
  display: block;
}
#close {
  display: none;
}

That should do the trick. You can view a working version here: https://jsfiddle.net/nh861fda/ :slight_smile:

8

Hi Kirupa !!:smile:

Thanks loads for that solution. I have not completely understood it yet. I’ll spend time on it and revert. Meanwhile just wanted to let you know that I am grateful for the time you spent on this.

Thanks loads !!:smiley:

9

I’m working on a tutorial that shows how to create this effect using regular JS and CSS (no jQuery). Not sure when I’ll be done with it, but it will be soon :stuck_out_tongue:

10

Will look forward to that Kirupa. Thanks loads.

11

This tutorial isn’t an exact replica of your situation, but it comes close: https://www.kirupa.com/html5/creating_a_smooth_sliding_menu.htm This may help you in figuring out how my changes to your example work :slight_smile:

12

Well, I would like to thank both of you. Actually, I was also stuck in the same issue since 5 days, but after reading your solution I guess my issue will be solved.

Thanks for the help.

13

@ Kirupa, Just going to take a look at your tutorial. I am sure it would be great and informative. Thanks.

@Matroot Glad to know this helped you. take care.

14

Hi Kirupa,

Hope you are good. I was thinking that this is done but I overlooked yet another issue, seemingly small, but looks a bit complicated to me. Find here a new fiddle with a slightly modifies code. https://jsfiddle.net/ajoo/38qm9hou/2/.

It shows a login form in the slider ( when the slider is opened) with a login button.
Normally : When the slider slides down the message on the tab is Close Panel.
However if the user makes a mistake in filling the form or submits and empty form, the slider toggles and remains open but the message shown changes to Log In | Register which should actually now still be Close Panel since the slider is down and the panel is showing the Login form.

However I think there is no way I can show this behavior on fiddle since I don’t think it handles form submission. But I like I said, on error occurring on form submission, the panel is open and the message is Log In | Register which should actually be Close Panel.

I hope I have been able to explain this well in a simple manner. Looking forward to some help from you once again. Thanks loads.

15

Hi Kirupa and all !

I think if the CSS can be changed through JQuery using something like $('#close').text('Close Panel');, then I suppose this issue can be easily resolved. But for that I would have to know some condition, like maybe the state the panel currently is in.

I need not worry about the value when the panel is closed since that is not creating any issues ( or at least not yet and I think that won’t create any issues). So all I need to do here is to check the panel state and if it is open, set the text value to Close Panel.

I don’t know how to figure out the state of the panel. Please help me to achieve this.

Thanks loads.