CODEWITHSUNDEEP
javascriptjqueryhtml
noirlama
noirlama

Reputation: 13

2 divs should open 2 different divs

sorry for the title, I don't know how I should have said it better (my brain is currently melting because of this problem I can't solve).

Here's a description of my problem:

At first I have one div with a list of names in it:

    <div id="objekt1">
        <ul id="listeNamen">
            <li><a href="#"> Hans Mustername </a></li>
            <li> Hans Mustername </li>
            <li> Hans Mustername </li>
        </ul>
    </div>

When I click on a name in this div, a second div box (#objekt2) pops up, with more information about the person I clicked on. In this div box there may be a link to even more details, if you click this #objekt3 (new div box) should pop up.

If I already clicked on the link in #objekt1 and click it again, there shouldn't be any more div added, same goes for #objekt2.

Now I've tried it using jQuery, sadly it doesn't work the way it should. If I click the link in #Objekt1 2 times, 2 divs will be added. If I click the link in #Objekt2 no div is added.

Here's my jQuery code for this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

function checkDiv(){  
        var anzahlDiv = $("div").length;
        if (anzahlDiv == 1){
            $('<div id="objekt2"><a href="#">testlink #1</a></div>').insertAfter("#objekt1");
        }else if (anzahlDiv == 2){
            $('<div id="objekt3"><a href="#">testlink #2</a></div>' ).insertAfter("#objekt2");
        }else{
            return;
        }
            exit;
    }


    $('#objekt1 ul li a, #objekt2 a').click(function () {
        checkDiv();
    });

Is there anyone here who could help me out on this one please? :(

Upvotes: 2

Views: 147

Answers (3)

zord
zord

Reputation: 4783

I would do it by adding some data attributes to the html, and then process those with generalized javascript. It's more readable, and no need to modify code if the data changes.

Basically I added a data-show attribute to the links, which is a comma separated list of the div ids that needs to be visible when the link has been clicked.

HTML:

<div id="objekt1">
    <ul id="listeNamen">
        <li><a href="#" class="infolink" data-show="john-info">John</a></li>
        <li><a href="#" class="infolink" data-show="mary-info">Mary</a></li>
    </ul>
</div>

<div id="john-info" class="infodiv">
    Info about John.
    <a href="#" class="infolink" data-show="john-info,john-moreinfo">More info</a>    
</div>

<div id="john-moreinfo" class="infodiv">
    More info about John.
</div>

<div id="mary-info" class="infodiv">
    Info about Mary.
    <a href="#" class="infolink" data-show="mary-info,mary-moreinfo">More info</a>    
</div>

<div id="mary-moreinfo" class="infodiv">
    More info about Mary.
</div>

CSS:

.infodiv {
    display: none;
}

JS:

$("body").on("click", ".infolink", function (event) {
    var dataShow = $(this).attr("data-show").split(",");        
    $(".infodiv").each(function (index, div) {
        var divId = $(div).attr("id"),
            visible = dataShow.indexOf(divId) !== -1;
        $(div).toggle(visible);
    });
    event.preventDefault();
});

Here is a working demo jsfiddle.

Upvotes: 1

Shreeraj Karki
Shreeraj Karki

Reputation: 238

Incase if you have fewer divs to show then you can do like this

    <div id="objekt1">
            <ul id="listeNamen">
                <li><a href="javascript:void(0);" onclick="first()"> Hans Mustername </a></li>
                <li> <a href="javascript:void(0);" onclick="second()">Hans Mustername </a> </li>
                <li> Hans Mustername </li>
            </ul>
        </div>
    <div id="test"></div>
<script type="text/javascript">
function first(){
$('#test').html("");
$('#test').html('<a href="">or any thing you want</a>');
}

function second(){
$('#test').html("");
$("#test").html("other thing you want"
)};
</script>

In case you have dynamic content the you can create a single function and pass its id the function and change the content of the div as you would like. It may not solve the problem but hope it would be helpful enough :)

Upvotes: 0

Nomeaning25
Nomeaning25

Reputation: 263

Since you want different actions for different objects you should have differnet functions e.g.:

    ....
    //Based on your curent code

function for_objekt1()

     if (anzahlDiv == 1){
        $('<div id="objekt2"><a href="#">testlink #1</a></div>').insertAfter("#objekt1");
    }else if (anzahlDiv == 2){            
        $('objekt2').remove();
        if (anzahlDiv == 3){
            $('objekt3').remove();
            ...
            }
        }
...

or something similar

Upvotes: 0

Related Questions