Expand/collapse problem

Some time ago, if I remember thanks to you, I made a new expand/collapse solution in js and css.

The js is:

$(".expandable").on("click", function (e) {
  e.preventDefault();
  $(this).toggleClass("expanded");
  $(this).next().toggleClass("hide");
});

the css is

a.interno.expanded:after {
  content: ' \002D';
  font-weight: bold;
  margin-left: 1px;  
}

.espan {
  padding-left: 2%;
  color: navy;
  font-size: 85%;
  display: block;
}

.hide {
 display: none;
}

the html is:

<a href="#" class="interno expandable">asdfa</a>
<span class="espan hide" id="asd">asdfasdfasdf</span>

I guess that I’m missing something, but I don’t know what…

Any way the above code (maybe with some other code) works, but only if I use the span tag, not with the div tag. And this is a problem with w3c validator, when I have complex text (with p, and h2, h3 tags) to collapse.
Where I’m wrong?

Seems to work ok with a div tag for me.

1 Like

We cant tell you where you’re going wrong if you show us the code that does work. We need to see the code that you’re trying to fix.

2 Likes

You’re right. I tried to simplify as possible my question, because I have a several css files and probably is there something that conflict.

I will send you my whole main css file
normal.css (21.4 KB)

As you see in my css file I had to set

span.hide {
 display: none;
}

otherwise the code didn’t work.

EDIT

Uhm… I copied the above codepen code and on a new file, my PC (even with the jquery resource linked) it doesn’t work (you can see at www.culturanuova.net/prova2.php).

Put your javascript at the bottom of the page and try again. You cant bind an onclick event to an element that doesnt exist yet.

(Before I get challenged on that, yes, i know event delegation is a thing, and i know that jquery’s ready function is available. This is the simplest answer.)

2 Likes

Yes, this was the problem.

EDIT

The only thing I still don’t understand is why, in the css file I have sent, I cannot remove the duplicate

.hide {
 /* visibility: hidden; 
  max-height: 0;*/
 display: none;
}

already declared here:

.hide {
  display: none;
  font-size: 85%;
  color: navy; 
}

but this is not a js question, I guess. The code seems work only if I declare twice the same class. This maddens me…

Maybe the answer is linked to the fact that so far the js code worked, even placed at the beginning (top) of a file, but only with the span tag.
I will do some attempts to understand it.

No that will have nothing to do with it at all.

It makes no difference whether its a span or a div but I notice in one of your posts you posted this:

span.hide {
 display: none;
}

Obviously that rule only applies to spans whereas if you use this instead:

.hide {
 display: none;
}

It will apply to any element it has been added to. (It will also avoid any specificity problems if you keep it as the simple class.)

1 Like

Which css file is this? Please just post the relevant css in the thread as I don’t like opening downloads.

EDIT: I looked at the download file anyway and the issue is most likely what I mentioned above and you have span.hide in one place and then .hide in another. Just use .hide and then there’s no need for duplicates.

1 Like

Now I have, in my css file, these rows, in order:

.hide {
  display: none;
  font-size: 85%;
  color: navy; 
}
#indice .hide {
  display: block;
}

(...)

.hide {
 /* visibility: hidden; 
  max-height: 0;*/
 display: none;
}

If I remove the last, I mess the result.

EDIT

I have found! Moving the first block

.hide {
  display: none;
  font-size: 85%;
  color: navy; 
}

at the place of the last, and removing the other two, now it is all fine.

It is possible that the problem was the

#indice .hide {
  display: block;
}

due to the fact that there aren’'t element with #indice ID?

No that is not possible. Your issue lies somewhere else. If no ID exists then that rule is never used. (Note that in order to override that rule with an id you would use to need the same weight e.g. #indice .show {display:block}.

In the CSS you posted removing the second portion of code does not change anything as seen by my screenshot. Look at the devtools to see the rule is crossed out but the element is still not showing because it is display:none from the first rule.

There must be some other code or html that we have not yet seen that is causing the issue. It sounds as though you have other code in the middle which sets the element to block somewhere along the line.

1 Like

Not only removing the second portion, but moving the first at the place of the second one.
Otherwise the problem remain.

Then it sounds like you have a rule in the middle that is overriding the first block. CSS order is important if rules have the same weight. CSS that is later in the cascade and of the same weight wins out.

Open your developer tools and highlight the element in question and you will get a list of the css that is currently applied to it and you can soon see where the styles come from. Look at my screenshot for an example.

You need to get familiar with developer tools as it will save you lots of time hunting around for things :slight_smile:

1 Like

Can you link us to the actual page? At least then we could show you what we’re looking at.

2 Likes

Yes, you can see a page with the working code (the link: questioni preliminari) here. In the source code you can check the linked css as well.

So when I Inspect the question link, and then click on the hidden div immediately after it, I see this in my developer tools.

This tells me that 4 things are trying to modify this class of div:
normal.css line 897, which is your definition for .espan
normal.css line 904, which is your definition for .hide
an in-the-HTML style tag, which defines the .espan class again,
an in-the-HTML style tag, which defines the .hide class again.

The last two are actually my darkscreen reader, and can be moderately ignored; but that is how we look at what is applying CSS to your elements.

2 Likes

Ah, one thought does strike to mind though…

If you’re using an external CSS file, and you’ve made modification to it, you may need to dump the cache while reloading the page to properly see the effects take hold. This can be done a couple of different ways, but notably, if you go to the actual CSS file in your browser, hold shift, and push F5, it will force a refresh. Then reload your page again.

2 Likes

As shown in the screenshot from @m_hutley you have the espan class at line 897 setting that element to display:block. Any CSS of the same weight that comes before that rule would not be used. Therefore if your original .hide was at line 896 or lower then it would have no effect as .espan wins out

1 Like

Thank you. I will see to fix.

1 Like

This tells me that 4 things are trying to modify this class of div:
normal.css line 897, which is your definition for .espan
normal.css line 904, which is your definition for .hide
an in-the-HTML style tag, which defines the .espan class again,
an in-the-HTML style tag, which defines the .hide class again.

But to be honest, I don’t see any in-the-HTML style tag, where .espan or .hide are defined: looking at the source code, they are defined only once, in normal.css. Anyone see where they are duplicated?