How to extract JS file governing click-to-expand content?

I’m trying to do mdd/mdx for Cambridge Dictionary online. Take the entry love as an example.

The original display on the website is

The display in GoldenDict is

In GoldenDict, all content of this kind is forcibly expanded and can not be clicked to collapse.

I also attach the raw txt, mdd, and mdx of this entry. Could you explain how to extract the JS code governing this click-to-expand content?

cambridge.zip (634.0 KB)

1 Like

Hope you will share this dictionary soon.

If someone helps me solve this click-to-expand problem, I’m willing to share this dictionary :))

Someone diffently help you. Thanks

Here is my solution. Hope it can meet your requirements.
cambridge.rar (72.0 KB)

1 Like

First of all, you need to add this code in your raw txt so that you can edit your own JS.


And don’t forget to hide your contents before clicking them.

1 Like

There is a problem with your js, i.e. it removes the indentation of the hidden content

I hope for a generic solution, i.e. extracting the function controlling this behavior from the website. This would help tackle other dictionaries too.

1 Like

I fix this problem by replacing {display:inline} with {display:block} in JS.
inline to block.rar (72.0 KB)

Sorry. It’s beyond me.

2 Likes

Thank you so much for your help! I use BeautifulSoup to crawl data and the resulted html has a different structure to the original one.

Original and your html have the same format:
image

Mine
image

Could you explain how to do that?


You should change these tags in JS according to your html structure. Try this one. Or you can upload your raw data.
scripts_cb.rar (29.2 KB)

1 Like

Thank you so much for your help. I got it.

Can you explain why you also control the class active? I thought the class display is already enough.

I’ve just figured out the your JS is very similar to below one:

$(document).ready(function () {
    $(".more_example_title").click(function () {
        var exampleSiblings = $(this).siblings("p.en_example")
        if (exampleSiblings.length > 0) {
            if (exampleSiblings.hasClass("active")) {
                exampleSiblings.removeClass("active");
                exampleSiblings.css({
                    "display": "none"
                });
            } else {
                exampleSiblings.addClass("active");
                exampleSiblings.css({
                    "display": "block"
                });
            }
        }
        if (exampleSiblings.length <= 0) {
            $(this).css({
                "color": "red"
            });
        }
    });
});

I feel that there is a general rule here. Could you please elaborate on how you come up with such js file?

Here is the js I found. js.zip (29.8 KB)

Your feeling is quite correct. I suggest you can learn some basics of JS if you are interested. It will not take too long, about few hours.

Some useful sites:

https://www.w3schools.com/js/DEFAULT.asp

2 Likes


Exactly, this kind of code is a really simple way to achieve click-to-expand effect.

  1. It is the tag where you want to click.
  2. It depends on your html structure to use “.siblings” or “.children”.
  3. It is the tag where you want to expand after clicking 1.
  4. After you click 1, the JS will expand your hidden contents, and add a new class “active” simultaneously.
  5. If your hidden content has the new class “active”, which means your contents have been expanded, the JS will remove the class “active” and hide the contents.
    In other words, it achieves click-to-hide effect.
  6. This is unnecessary. You can delete it.

Can you explain why you also control the class active ? I thought the class display is already enough.

Because you need to add an new tag to let your dictionary know whether you have clicked or not.
Otherwise, you can’t hide your contents after you clicked.

也感謝版主提供建議 Thanks a lot.

2 Likes

This is really great and enlightening. It seems to me your function is on top of a jquery. Could you please explain why you use that jquery? Is there any part of your function dependent on that jquery?

image
I think all these function dependent on that jquery, but I am not really sure. I just copy it from other dictionaries. Maybe someone else can help you.

Thank you so much for your dedicated help. Many things get clearer with your explanation :heart_eyes: