(may be a jQuery problem though) the second div doesn't appear when it should

Community Off Topic
1

the CSS visibility property in this is controlled by jQuery. it’s set to hidden in the CSS and there’s jQuery that changes the attribute value. i know there isn’t a syntax error. i’m using jsfiddle so no JS would work if there was a single syntax error. why doesn’t the div show up? (all of the IDs referenced in jQuery are for divs btw, except for id=“story” which is for an h3). this is all of my JS file. i apologize for putting so much here, i’m pretty sure the error is near the end but honestly i have no idea. the one thing i’m sure of is that it isn’t in the $(’#start’).click(function(){}) section.

`var currentPosition = “before start”;
var text_to_display = “”;

$(document).ready(function()
{

$('#start').click(function()
{
    $('#start').hide();
    $('#choose-shale').css(
    {
        visibility: 'visible'
    });
    $('#choose-basalt').css(
    {
        visibility: 'visible'
    });
    $('#choose-slate').css(
    {
        visibility: 'visible'
    });
})

$('#choose-shale').click(function()
{
    $('#choose-shale').css(
    {
        visibility: 'hidden'
    });

    $('#choose-basalt').css(
    {
        visibility: 'hidden'
    });

    $('#choose-slate').css(
    {
        visibility: 'hidden'
    });
    text_to_display = "filler";
    document.getElementById("story").innerHTML = text_to_display;
    $('#start2').css(
    {
    	visiblity: 'visible'
    });
})

$('#choose-basalt').click(function()
{
    $('#choose-shale').css(
    {
        visibility: 'hidden'
    });
    $('#choose-basalt').css(
    {
        visibility: 'hidden'
    });
    $('#choose-slate').css(
    {
        visibility: 'hidden'
    });
	text_to_display = "filler";
    document.getElementById("story").innerHTML = text_to_display;
    $('#start2').css(
    {
    	visiblity: 'visible'
    });
})

$('#choose-slate').click(function()
{
    $('#choose-shale').css(
    {
        visibility: 'hidden'
    });
    $('#choose-basalt').css(
    {
        visibility: 'hidden'
    });
    $('#choose-slate').css(
    {
        visibility: 'hidden'
    });
    text_to_display = "filler";
    document.getElementById("story").innerHTML = text_to_display;
    $('#start2').css(
    {
    	visiblity: 'visible'
    });
})


    $('#start2').click(function()
{
    text_to_display = "filler2";
    document.getElementById("story").innerHTML = text_to_display;
})

});`

2

You should post here a link to a jsFiddle, it would make helping you a lot easier.

Problem is in this code (this snippet is used multiple times):

$('#start2').css({
    visiblity: 'visible'
});

It should be visibility. You have to add i after visib.

3

oh my god i really should’ve caught that. thank you sooo much!