how to open specific div by class name onclick

Question

I have many div with the class name dis

HTML:

<div class="dis">Content</div>
<div class="dis">Content</div>
<div class="dis">Content</div> and so on ...

And have many images:

<img src="icons/image1.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image2.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image3.png" class="admoicn" onclick="toggle_visibility('dis');" >

CSS:

.dis{  
    display:none;
    width:100px;
    height:100px;  
}

javascript:

function toggle_visibility(id) {
    var e = document.getElementsByClassName(id)[0];
    if(e.style.display =="block"){
        e.style.display ="none";
    }
    else{
        e.style.display ="block";
    }
}

Onclicking any image the specific div dis should be open, I mean onclicking third image3.png the third number of div dis should be open and close all opened dis div.

I think it's the array problem on javascript class and I don't know how to fix it. I'm very new to javascript.

Don't know how to do it in your situation without having a more complete look at your markup. You can do it by index if all the dis elements have no other siblings, and same for the images. But we shouldn't be guessing at details like this. — user1106925
– user1106925, Commented Jul 25, 2016 at 2:43
Are the index of images and divs same, for example. If I click the first image should u show the first div and so on, do they follow that order — Shintu Joseph
– Shintu Joseph, Commented Jul 25, 2016 at 2:51

acdcjunior · Accepted Answer · 2016-07-25 03:02:23Z

1

You could add an argument to the toggle_visibility function:

<img src="icons/image1.png" class="admoicn" onclick="toggle_visibility('dis', 0);" >
<img src="icons/image2.png" class="admoicn" onclick="toggle_visibility('dis', 1);" >
<img src="icons/image3.png" class="admoicn" onclick="toggle_visibility('dis', 2);" >

And use it as index to the array:

function toggle_visibility(id, index) {                    // added index here
    // close all divs
    var els = document.getElementsByClassName(id);
    for (var i = 0; i < els.length; i++) {
        els[i].style.display ="none"
    }

    // show selected div
    els[index].style.display = "block";
}

JSFiddle demo here.

By the way, if the argument is a class name, you should really name it that (not id as you are now, it is very misleading).

edited Jul 25, 2016 at 3:02

answered Jul 25, 2016 at 2:50

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jung Young-min Over a year ago

this does not close all the opened divs

BobRodes Over a year ago

Can't you pass this into the onclick handler and not have to use indexes?

acdcjunior Over a year ago

@BobRodes yes, you could. I don't pass it now because it is not really needed (I just manipulate the divs, not the images), but you could if you needed.

user1106925 Over a year ago

Passing this would eliminate the need to pass individual indices since the index can then be determined dynamically. However, it makes assumptions about the markup that the OP would need to clarify.

Rohit Bind · Accepted Answer · 2016-07-25 09:35:58Z

Its very simple, this codepen will help you to achieve it.

$(document).ready(function(){
    $("img").click(function(){
        var classname = this.id;
        $('div').removeClass('show');
        $("."+classname).addClass('show');
    });
});

img{
      cursor:pointer;
      width : 30px;
      padding:20px;
      border:1px solid #333;
}

div{
      display:none;
}
.show{
      display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://image.flaticon.com/icons/svg/149/149384.svg" id="Phone" />
<img src="http://image.flaticon.com/icons/svg/149/149181.svg" id="chem" />
<img src="http://image.flaticon.com/icons/svg/149/149098.svg" id="cam" />

<div class="Phone">
    <h1>Hi This is phone</h1>
</div>
<div class="chem">
    <h1>Hi This is chem reaction</h1>
</div>
<div class="cam">
    <h1>Hi This is camera</h1>
</div>

Collectives™ on Stack Overflow

how to open specific div by class name onclick

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related