# How to extract JS file governing click-to-expand content? **URL:** \ **Category:** 技术交流与词典编修\ **Tags:** 词典软件制作, mdx\ **Created:** [2021 年3 月 7 日 07:39 UTC](https://forum.freemdict.com/t/topic/5201 "2021-03-07T07:39:22Z")\ **Posts on this page:** 18\ **Page:** 1
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 7 日 07:39 UTC](https://forum.freemdict.com/t/topic/5201/1 "2021-03-07T07:39:23Z")
I’m trying to do mdd/mdx for Cambridge Dictionary online. Take the entry [love](https://dictionary.cambridge.org/dictionary/english/love) as an example. The original display on the website is ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/b/b7ab06a5a774c1c7afb656b4661365ad3b45da3a.png) The display in GoldenDict is ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/8/833ee5f5e335776fc6c92e1e5c4e292519d2b4d7.png) 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](https://forum.freemdict.com/uploads/short-url/5sl83kBxknfUlQbfQiAWkZEBhOp.zip) (634.0 KB) ---
作者： ![Sirabbas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/sirabbas/32/71180_2.png) [@Sirabbas](https://forum.freemdict.com/u/Sirabbas)\ 发布日期： [2021 年3 月 7 日 07:48 UTC](https://forum.freemdict.com/t/topic/5201/2 "2021-03-07T07:48:46Z")
Hope you will share this dictionary soon. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 7 日 07:58 UTC](https://forum.freemdict.com/t/topic/5201/3 "2021-03-07T07:58:57Z")
If someone helps me solve this click-to-expand problem, I’m willing to share this dictionary :)) ---
作者： ![Sirabbas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/sirabbas/32/71180_2.png) [@Sirabbas](https://forum.freemdict.com/u/Sirabbas)\ 发布日期： [2021 年3 月 7 日 08:28 UTC](https://forum.freemdict.com/t/topic/5201/4 "2021-03-07T08:28:46Z")
Someone diffently help you. Thanks ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 8 日 11:49 UTC](https://forum.freemdict.com/t/topic/5201/5 "2021-03-08T11:49:41Z")
Here is my solution. Hope it can meet your requirements. [cambridge.rar](https://forum.freemdict.com/uploads/short-url/juNbqOhfktu7nfIVO8DZ8MA3Bux.rar) (72.0 KB) ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 8 日 12:05 UTC](https://forum.freemdict.com/t/topic/5201/6 "2021-03-08T12:05:00Z")
First of all, you need to add this code in your raw txt so that you can edit your own JS. ![P1](https://forumcdn.freemdict.com/uploads/default/original/2X/e/e6b87f3156a6f052655454c584fd02edf1319cbc.jpeg) And don’t forget to hide your contents before clicking them. ![P2](https://forumcdn.freemdict.com/uploads/default/original/2X/e/e82ac5f56253c018505367777acfe7861441a8c6.jpeg) ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 8 日 12:15 UTC](https://forum.freemdict.com/t/topic/5201/7 "2021-03-08T12:15:28Z")
There is a problem with your js, i.e. it removes the indentation of the hidden content ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/e/e5864ff8f5f96dce1949ab5a3b21ee983921aed8.png) I hope for a generic solution, i.e. extracting the function controlling this behavior from the website. This would help tackle other dictionaries too. ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/e/e1e3ed5eef22eb9da6776d26d7a8d90593948f7c.png) ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 8 日 12:41 UTC](https://forum.freemdict.com/t/topic/5201/8 "2021-03-08T12:41:49Z")
> [@Akira](#): > > There is a problem with your js, i.e. it removes the indentation of the hidden content I fix this problem by replacing {display:inline} with {display:block} in JS. [inline to block.rar](https://forum.freemdict.com/uploads/short-url/sL3qqibBM1KTeFGfQU3XuPfv43k.rar) (72.0 KB) > [@Akira](#): > > I hope for a generic solution, i.e. extracting the function controlling this behavior from the website. This would help tackle other dictionaries too. Sorry. It’s beyond me. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 8 日 13:39 UTC](https://forum.freemdict.com/t/topic/5201/9 "2021-03-08T13:39:46Z")
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](https://forumcdn.freemdict.com/uploads/default/original/2X/3/35419793e1a28b8262c7d236f122d6356c5f93c8.png) Mine ![image](https://forumcdn.freemdict.com/uploads/default/original/2X/5/5e1c7ed2d1981347a8df4335af902c067dce3628.png) Could you explain how to do that? ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 8 日 14:25 UTC](https://forum.freemdict.com/t/topic/5201/10 "2021-03-08T14:25:03Z")
![explain1](https://forumcdn.freemdict.com/uploads/default/original/2X/a/afd70ae37d63cc8b87718b9fd372c7baeae3c2c6.jpeg) 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](https://forum.freemdict.com/uploads/short-url/edBrjq2gll44lW4QuUvlhlSYZ8S.rar) (29.2 KB) ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 8 日 16:22 UTC](https://forum.freemdict.com/t/topic/5201/11 "2021-03-08T16:22:01Z")
Thank you so much for your help. I got it. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 8 日 16:28 UTC](https://forum.freemdict.com/t/topic/5201/12 "2021-03-08T16:28:46Z")
Can you explain why you also control the class `active`? I thought the class `display` is already enough. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 8 日 22:11 UTC](https://forum.freemdict.com/t/topic/5201/13 "2021-03-08T22:11:55Z")
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](https://forum.freemdict.com/uploads/short-url/eyPcaIDi9hfFUrMYlOMQghbvFp5.zip) (29.8 KB) ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2021 年3 月 9 日 00:58 UTC](https://forum.freemdict.com/t/topic/5201/14 "2021-03-09T00:58:36Z")
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: > **[JavaScript Tutorial](https://www.w3schools.com/js/DEFAULT.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. > **[Learn JavaScript](https://learnjavascript.online/app.html?id=3)** > > Learn JavaScript Online: The easiest way to learn & practice modern JavaScript ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 9 日 05:49 UTC](https://forum.freemdict.com/t/topic/5201/15 "2021-03-09T05:49:51Z")
![解釋](https://forumcdn.freemdict.com/uploads/default/original/2X/7/728b67775252cb09a7611c1098a4ae9c8d39ece9.jpeg) 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. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 9 日 08:39 UTC](https://forum.freemdict.com/t/topic/5201/16 "2021-03-09T08:39:47Z")
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? ---
作者： ![Roselle](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/r/97f17d/32.png) [@Roselle](https://forum.freemdict.com/u/Roselle)\ 发布日期： [2021 年3 月 9 日 12:31 UTC](https://forum.freemdict.com/t/topic/5201/17 "2021-03-09T12:31:50Z")
![image](https://forumcdn.freemdict.com/uploads/default/original/2X/d/d434ad8c0bcaf1f180f97e97a8e6486229071162.jpeg) 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. ---
作者： ![Akira](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/a/ba8739/32.png) [@Akira](https://forum.freemdict.com/u/Akira)\ 发布日期： [2021 年3 月 9 日 12:45 UTC](https://forum.freemdict.com/t/topic/5201/18 "2021-03-09T12:45:24Z")
Thank you so much for your dedicated help. Many things get clearer with your explanation 😍