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
  • #194949

    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.

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


    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…

    input { display: none }
    .hidable { display: none; }
    #showA:checked ~ .divA,
    #showB:checked ~ .divB { display: block; } /*or inline*/
    <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>

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

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


    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.


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

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