Tukukkk

I am interested in finding out if there is a way to expand all the collapsible sections on a webpage simultaneously. A relevant section on the webpage I am looking at looks like this:

<tr>

    <td></td>

    <td style="..;">

        <div style="..">

            <span id=".." style="display:inline;"><br />

                <div style="display:inline"> ... 

                </div>

            </span>

            <span id="toHide1234" style="display:none;"><br />

                <div style="display:inline">

                    <p>.....</p>

                </div>

            </span>

            <a id="expcoll1234" href="JavaScript:expandcollapse('expcoll1234',1234)">

                expand

            </a>

        </div>

    </td>

</tr>

As seen above, by clicking on expand link, this section would expand. Trouble is, there are hundreds of such expand links on the webpage I am interested in, and there are many such web pages I want to do this for.

Any thoughts on this would be much appreciated. I need a really simple way to do this, as I am not very well versed with web programming. Just know very elementary HTML.

So you want to use this on a website that isn’t under your control? Then you are limited in your possibilities to get your own JavaScript code inserted into that in the first place. It could perhaps work from the browser console or a “bookmarklet”, if the target site does not prevent that via CSP.

If just getting at the “raw data” present in the HTML is the objective here, then your best bet is probably to disable styling in your browser completely - that overrides inline stuff like style="display:none;" as well, so that everything should be visible right from the start.

As you said in comments, https://superuser.com/questions/447269/is-there-any-way-to-view-a-webpage-without-styles-in-chrome led to uMatrix browser extension, so if that works for your purposes - perfect ;-)

Assuming all your hidden sections have ids of format "toHide" + some numbers you can find all the <span> elements on the page and filter them by id and change display style:

Array.from(document.getElementsByTagName('span'))

     .filter(span => span.id.startsWith('toHide'))

     .forEach(span => { span.style.display = ''; });

You could use jQuery to do this.

First, you would probably want to give every div that expands an “expand” class or something, as welll as a class like “collapsed” that sets the height of the element to 0 (or however you are collapsing the element.)

<div class=“expand collapsed …”>

…

</div>

<div class=“expand collapsed…”>

…

</div>

You can then select all those <div>s simultaneously and remove the collapsed class like so:

$(‘.expand’).removeClass(‘collapsed’);

You can stick that line in a function and call the function on a button press by setting the button’s onClick Attribute to the name of the function.

Another approach is to use a library like Bootstrap—Bootstrap has a lovely collapse mechanism.

I had the same issue where I wanted to expand all of the abstract sections on Arxiv automatically. Using the Chrome dev console I found this worked exactly like I wanted:

('.abstract-full').css('display','inline')

Since the "abstract-full" class had display: none.