CODEWITHSUNDEEP
javascripthtmlcss
user2139497
user2139497

Reputation: 129

How to change style of HTML element depending on another elements style?

In my Web application i am changing style of HTML Element using javascript.

See be below code,

function layout() {
    if(document.getElementById('sh1').getAttribute('src') == "abc.png") {
        document.getElementById("sh1").style.display="none";
    } else {
        document.getElementById("sh1").style.display="block";
    }
}

and HTML is :

<img id="sh1" src="abc.png" />

Now i want that if img elements style is display:none; then below Elements 

<p id="Text1">Name<br />description</p>

style should also get changed to display:none; and if img elements style is display:block; then above Elements style should also get changed to display:block; automatically.

how this can get achieved?

Upvotes: 1

Views: 531

Answers (3)

Blain Smith
Blain Smith

Reputation: 1

I would recommend just using jQuery and changing the markup to wrap your image and text together. Check out the link to a working example too.

<figure id="sh1" class="picture active">
   <img src="http://placehold.it/100x100&text=abc.png" />
    <figcaption><span class="name">ABC</span><span class="desc">This is a description</span>
    </figcaption>
</figure>

<figure id="sh2" class="picture">
   <img src="http://placehold.it/100x100&text=xyz.png" />
    <figcaption><span class="name">XYZ</span><span class="desc">This is a description</span>
    </figcaption>
</figure>

http://jsfiddle.net/Qvb4U/1/

Upvotes: 0

Mark Walters
Mark Walters

Reputation: 12390

If i've understood you correctly then your after this 

function layout(){
  if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
    document.getElementById("sh1").style.display="none";
    document.getElementById("Text1").style.display = "none"; //Hide the description
  } else {
    document.getElementById("sh1").style.display="block";
    document.getElementById("Text1").style.display="block"; //Show the description
  }
}

If this function is unique to this image and desciption then this should work nicely, obviously if there are a whole bunch of images that you are applying this logic to then there is a much more efficient way of achieving this with a generic function.

Upvotes: 0

Martin Turjak
Martin Turjak

Reputation: 21214

Add the other element in your function too. Something like this:

function layout(){
    if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
        document.getElementById("sh1").style.display="none";
        document.getElementById("Text1").style.display="none";
    } else {
        document.getElementById("sh1").style.display="block";
        document.getElementById("Text1").style.display="Block";
    }
}

or if you put both in a container you can do one operation on the whole container =)

Upvotes: 1

Related Questions