-3

I have a HTML code like this:

<html>
<head>
<style>
img.settings {
    hight: 100px;
    width: 20px;
}

div.settings {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 100%;
    bottom: 0px;
    background-color: #000000;
}
</style>
</head>
<body>
<div class="head">
    <img class="settings" src="settings.png" />
</div>
<div class="settings"></div>
</body>
</html>

I want the div#settings property right: 100%; to be changed to right: 50%; if I click on the image. In other word I want the <div> to be shown/hidden by clicking the image. Is it possible by (only) css?

nazmus saif
  • 167
  • 1
  • 2
  • 12
  • You can't do that without JavaScript. CSS defines the style, not the interaction. –  Dec 14 '14 at 17:49
  • 4
    You could do it (more or less) in CSS if they were siblings. But since there is no parent selector, you can't. – Oriol Dec 14 '14 at 17:49
  • You end Your code with 2nd `` tag. It should be ` – Jazi Dec 14 '14 at 17:53
  • opps! fixed now... @Krzysztof . – nazmus saif Dec 14 '14 at 18:00
  • if they were siblings, what would be the code? @Oriol . – nazmus saif Dec 14 '14 at 18:02
  • @nazmussaif: if you want users using IE8, you have to use JS as I write underneath. – pavel Dec 14 '14 at 18:04
  • @panther I understand your concern and i appreciate that. And I know JavaScript would be more global and accurate! But I was actually looking for a css code (more precisely if css can do that sort of thing) as there are similar question for JavaScript. – nazmus saif Dec 16 '14 at 06:52

4 Answers4

1

Since there is no parent selector, you can't do it CSS only.

However, if they were siblings, you could add tabindex="-1" to the image and use something like

img.settings:focus + div.settings {
  right: 50%;
}


img.settings {
  height: 100px;
  width: 20px;
}
div.settings {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 100%;
  bottom: 0px;
  background-color: #000000;
}
img.settings:focus + div.settings {
  right: 50%;
}
<img class="settings" src="settings.png" tabindex="-1" alt="[img]" />
<div class="settings"></div>

Note the effect will be temporary, and will end when you click somewhere else.

If you don't want to hide div.settings when you click itself, consider

img.settings:focus + div.settings, div.settings:focus {
  right: 50%;
}


img.settings {
  height: 100px;
  width: 20px;
}
div.settings {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 100%;
  bottom: 0px;
  background-color: #000000;
}
img.settings:focus + div.settings, div.settings:focus {
  right: 50%;
}
<img class="settings" tabindex="-1" src="settings.png" alt="[img]" />
<div class="settings" tabindex="-1"></div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
1

There are hacks you can employ to achieve this like the checkbox hack, but please don't. This is much better suited for JavaScript.

var settingsImage = document.querySelector('img.settings'),
    settingsDiv = document.querySelector('div.settings');

settingsImage.addEventListener('click', function toggleSettingsDiv() {
  settingsDiv.classList.toggle('hidden');
});
img.settings {
    hight: 100px;
    width: 20px;
}

div.settings {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 100%;
    bottom: 0px;
    background-color: #000000;
}
.hidden {
  display: none;
}
<div class="head">
    <img class="settings" src="settings.png" />
</div>
<div class="settings hidden">Lorem Ipsum</div>

And no, you don't really need jQuery to do this, dispite what several other answers here say.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

I don't believe you can with just CSS, you could try the :active flag but that only works as long as the user holds the click down I think.

As for javascript, you just attach a class to the element when a onclick event fires. I'd recommend using the element.classList: https://developer.mozilla.org/en-US/docs/Web/API/element.classList

Dan Brinkman
  • 71
  • 3
-1

The easiest way would be to use JavaScript and then apply the .css() function under .click(). Go through any tutorial and you will learn how to do this without any major help. Please comment for code in case you are still confused.

zaain
  • 13
  • 6