Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Issue with show/hide DIV with slider

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 3, 2015 at 2:43 am #194949
    ThatCat
    Participant

    Hi there!

    I’m developing my website, and I need to show a slider’s DIV but organized by categories.

    I mean: I have a menu (nav) who show the DIV (with the slider inside) what I want to see, and hides the others DIVs.

    I need to hide the DIV with Slider A, and show the Slider B, but the DIV with the Slider B doesn’t show anything.

    The problem is, with my code, I can’t see the other sliders.
    Example: http://jsfiddle.net/q2nj580q/

    I hope this gonna be understandable and you help me, this makes me angry.

    February 3, 2015 at 1:50 pm #195028
    Egp
    Participant

    Sorry, I don’t know why your Js code isn’t doing what you want correctly, but I can show you a way to do these things without Js, just with html INPUT elements instead (as primitive ‘state’ conditions). The secret are the LABEL tags that allow you to bind any HTML element to the INPUT states, so in the CSS you can hide (display: none) or show according to what INPUT is checked. However, it’s HTML5 only because of the ~ selector.
    The CSS can be separated from the HTML of course…

    ...<style>
input { display: none }
.hidable { display: none; }
#showA:checked ~ .divA,
#showB:checked ~ .divB { display: block; } /*or inline*/
</style></head>

<body>
<input type='radio' autocomplete='off' name='state1' id='showA' checked>
<input type='radio' autocomplete='off' name='state1' id='showB'>

<label for='showA'> Show A and Hide B </label>
<label for='showB'> Show B and Hide A </label>
<div class='hidable divA'> ...all content of A here </div>
<div class='hidable divB'> ...all of B here </div>
...etc. </body></html>
    February 4, 2015 at 12:40 am #195045
    Shikkediel
    Participant

    Second slider also had the identifier div1 instead of div2 and a few lines of the js didn’t really make sense :

    http://jsfiddle.net/q2nj580q/4/

    Edit – I get the intention with the extra lines of script but the ocultar class was added twice on the divs (making them permanently hidden).

    February 4, 2015 at 2:33 pm #195127
    ThatCat
    Participant

    Thanks for the answer, Shikkediel.
    But I just want to see the first DIV when I enter to the website and hide the others; that is my problem.

    February 4, 2015 at 4:26 pm #195133
    Shikkediel
    Participant

    I didn’t look into it that deeply before. But this has to do somehow with the slider initiating. Hiding or setting height to zero will disturb it. Using window onload didn’t work either (but that might be due to JSFiddle). Only thing that came close is using opacity (possibly z-index too).

    http://jsfiddle.net/q2nj580q/6/

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.