CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3629180
user3629180

Reputation: 27

Javascript div onclick and back button

For some reason, i have this two functions in my javascript, and both seems to work. The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.

The second one, is when the user is on the second div, and clicks on back.

All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.

It's closing both divs.

First Div with two options:

<div class="firstQuestion">
     <div class="male" onclick="secondQuestion(this);"></div>
     <div class="female" onclick="secondQuestion(this);"></div>
</div>

Second div, with back button:

<div class="secondQuestion">
     <form class="formAconselhamento" id="male">
     <input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
     <input type="button" id="save_value_male" class="next" name="save_value" />
     </form>
</div>

Javascript functions:

function secondQuestion(divID)
{
    var clicado = $("#"+$(divID).attr('class'));
    $(".firstQuestion").hide();
    $("#"+$(divID).attr('class')).show();
}

function comeBack(divID)
{
    var backButton = $(divID).attr('id');

    if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
    {
        $(".secondQuestion").hide();
        $(".firstQuestion").show();
    }
}

How can i resolve my issue?

Upvotes: 0

Views: 1938

Answers (2)

Toki
Toki

Reputation: 294

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .maincat{background: #eef;}.subcat{background: #abc;}
    </style>
</head>
<body>
<div class="maincat">
    <div class="type" rel='one'>first</div>
    <div class="type" rel='two'>second</div>
    <div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
<a href="#" class="back">back</a>
    <div id="one">
        first content
    </div>
    <div id="two">
         second content
    </div>
<div id="three">
         third content
    </div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
    $("#" + $(this).attr('rel')).show().siblings().hide();
    $('.subcat').show();$('.back').show();
});

$(".back").click(function(){
    $('.subcat').children().hide();$(".maincat").show();
});

</script>
</body>
</html>

Upvotes: 1

Regent
Regent

Reputation: 5178

In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">

Try something like:

function comeBack(divID)
{
    var backButton = $(divID).attr('id');

    if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
    {
        $(divID).closest("form").hide();
        $(".firstQuestion").show();
    }
}

Upvotes: 1

Related Questions