0

So I have a problem with my hiding/showing of DIVs without the use of JavaScript.

So basically, the moment you click on a link within the div that has been selected, the div will close and you won't be taken to that link.

The code is below. I am not using JavaScript for this so please don't give me that as a solution/suggestion. I am using Chrome, however I have tested with other browsers and it is a problem within them as well.

I've just filled it with some test data, but it functions exactly the same as with the live data. Just click on the heading, and try to click on the 'Google' link and you'll understand my problem.

If anyone can fix it, that would be great because I can't seem to do it. :/

<html>
<head>
<style>
    .collapse > * + *{
      display:none;
    }
    .collapse > *{
     cursor:pointer;
    }
    .collapse:focus{
      outline:none;
    }
    .collapse:focus > * + *{
     display:block; 
    }
    .collapse h1 {
    background-color:#BF3131;
    }
</style>
</head>

<body>
    <div class="collapse" tabindex="1">
    <h1 id="test">LOREM IPSUM</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
     <p><a href="http://www.google.com">Google</a>
    </div>

    <div class="collapse" tabindex="1">
    <h1 id="lol">Test</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
     <p><a href="http://www.google.com">Google</a>
    </div>
</body>
</html>

This was originally from : Show hide divs on click in HTML and CSS without jQuery

Community
  • 1
  • 1
Nomm
  • 49
  • 2
  • 8
  • Why do you not want to use jQuery for something that its good for? – Andrew Jul 23 '15 at 08:30
  • I'm using this for Wordpress and whenever I utilise links and go into the page to edit the data that is hidden, you can't actually view it in the text editor - and half the time Wordpress is bad and doesn't like JS – Nomm Jul 23 '15 at 08:42

2 Answers2

0

Unfortunately CSS3 doesn't support parent selectors. :( So the only way to do it is to use javascript like the jQuery parent method.

CSS Selectors Level 4 support parent selectors but it wouldn't work on every browsers right now.

You can test it : http://css4-selectors.com/browser-selector-test/

Idov Mamane
  • 372
  • 1
  • 8
0

As you already figured out, this is some kind of timing problem. When you are clicking on the Link your div loses focus and the content collapses before the actual click action is triggered ...

I would use the checkbox hack for that kind of thing. Something like that maybe:

div {
  outline: none;
  cursor: pointer;
}

input {
  display: none;
}

input:checked ~ p {
  display: block;
}

label ~ p {
  display:none;
}

h1 {
  cursor: pointer;
  background-color:#BF3131;
}
<div tabindex="1">
  <input id="header-1" type="radio" name="headers">
  <label for="header-1">
    <h1 id="test">LOREM IPSUM</h1>
  </label>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
  <p><a href="http://www.google.com">Google</a>
</div>

<div tabindex="1">
  <input id="header-2" type="radio" name="headers">
  <label for="header-2">
    <h1 id="lol">Test</h1>
  </label>  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
  <p><a href="http://www.google.com">Google</a>
</div>
r4ph43l
  • 53
  • 6