# A slider problem.

**URL:** <https://forum.kirupa.com/t/a-slider-problem/635480>\
**Category:** Uncategorized\
**Created:** [October 25, 2016, 7:05pm UTC](https://forum.kirupa.com/t/a-slider-problem/635480 "2016-10-25T19:05:04Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [October 25, 2016, 7:05pm UTC](https://forum.kirupa.com/t/a-slider-problem/635480/1 "2016-10-25T19:05:04Z")

</div>

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/](https://jsfiddle.net/ajoo/totym83v/3/)

Thanks.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 26, 2016, 3:12am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/2 "2016-10-26T03:12:20Z")

</div>

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?

😄

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [October 26, 2016, 7:13am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/3 "2016-10-26T07:13:52Z")

</div>

😃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 😕 by your reply as I guess I should be - the reply coming from an expert !! 🕶

Please help clarify some more.  
Thanks loads !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 27, 2016, 1:52am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/4 "2016-10-27T01:52:28Z")

</div>

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 🙂

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!

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [October 27, 2016, 9:04am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/5 "2016-10-27T09:04:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 3, 2016, 12:14pm UTC](https://forum.kirupa.com/t/a-slider-problem/635480/6 "2016-11-03T12:14:02Z")

</div>

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/](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 !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 6, 2016, 1:28am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/7 "2016-11-06T01:28:47Z")

</div>

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/](https://jsfiddle.net/nh861fda/) 🙂

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 8, 2016, 7:16pm UTC](https://forum.kirupa.com/t/a-slider-problem/635480/8 "2016-11-08T19:16:37Z")

</div>

Hi Kirupa !!😄

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 !!😃

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 9, 2016, 8:41am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/9 "2016-11-09T08:41:36Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [November 16, 2016, 1:31pm UTC](https://forum.kirupa.com/t/a-slider-problem/635480/10 "2016-11-16T13:31:44Z")

</div>

Will look forward to that Kirupa. Thanks loads.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 22, 2016, 6:25am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/11 "2016-11-22T06:25:53Z")

</div>

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](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 🙂

---

<div class="post-metadata">

**Author:** ![MattRoot](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@MattRoot](https://forum.kirupa.com/u/MattRoot)\
**Post date:** [November 23, 2016, 10:35am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/12 "2016-11-23T10:35:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [December 1, 2016, 5:12am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/13 "2016-12-01T05:12:41Z")

</div>

@ 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.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [December 1, 2016, 8:27am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/14 "2016-12-01T08:27:53Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![ajoo](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@ajoo](https://forum.kirupa.com/u/ajoo)\
**Post date:** [December 2, 2016, 11:39am UTC](https://forum.kirupa.com/t/a-slider-problem/635480/15 "2016-12-02T11:39:02Z")

</div>

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.