I'd start by fixing the errors displayed in the console.
But your main problem is likely your duplicate IDs, e.g.:
<p id="section2">In contrast:</p><ul id="section2">
That's invalid HTML. Different browsers will treat duplicate IDs differently. When browsers are given invalid HTML, they make the best of a bad situation. I'm surprised it works at all.
Selectors like this are not very useful:
#institute_description p#section2
It probably does't do what you think. This will typically first find the first element with ID of section2 in the document. Then, if that element is a child of a <p> element which is a child of the first element with ID institute_description, it will return the element. If not, it will return an empty list.
You are using IDs as if they were CSS classes. That doesn't work.
Since IDs must be unique within a document, you can just re-write the above selector as:
#section2
No, it will not return exactly the same result of the rule shown earlier. But I don't see any usefulness for the first incantation. Unless you want a selector that will work in strange ways in some browsers and not at all in others.
You can "fix" this by changing #section2 to e.g. [id=section2]. But that is a horrible "fix". If you do this anywhere where performance matters (say, in a loop over a lot of elements) you should realize this is one of the slowest selectors possible, while the ID selector is THE fastest. It's a useful hack in case you've already written a lot of HTML the wrong way.
But, still, it IS invalid HTML, and results are not guaranteed.
Finally: you'd get much better performance with smoother operation from a CSS3 transition rather than .toggle(). The effect is pretty annoying in my Safari desktop browser.
There are third-party plugins that will retrofit jQuery animations with something faster and more modern. (You still use the same API.) I haven't tried them. I don't use jQuery animations. CSS3 for me. (Some things CSS3 cannot do. If you have to do them, use something better than jQuery animations.)