How to make a DIV open and close slowly

JavaScript
1

Hello All,

We would like to have certain DIVs open and close slowly, when people click on the controlling DIV subject line.
So for example here:

https://www.anoox.com/paid/faq_about_anoox_advertising.php

if you click on the Subject of a question, you will see that the DIV opens suddenly. We would like it to open slowly just as the accompanying Arrow image to the right rotates Up slowly and Down slowly.

And just to be clear: the Hight of the DIV that is closed which is to Open upon click on Subject is not known, as it can vary from Question to Question. So it is very crucial that the open DIV height is not fixed.

Thanks.

P.S., I forgot to mention: No Jquery please. Solution should be in CSS & native JS.

2

Is there a particular reason that you don’t want to use jquery?

3

Yes, there are many reasons. I dont want to get into arguments about these reasons. Since the reasons always start a Pro Con argument. So for these reasons, we like to work with Native (Vanilla) JavaScript only. And of course CSS.
Thanks,

4

answer given. I just asked

5

Try searching for CSS accordion.

6

JohnB.
So I implemented the CSS accordion using the JavaScript method.
And it is working fine as you can see in above page. when it comes to opening the DIV.
But not closing the DIV.
That is when opening the DIV the JS code now is opening it with Transition time of 1 sec.
However, when closing the DIV it closes instantly.
Do you have suggestion how to fix this?
FYI, I tried setting in:

if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + “px”;
}

panel.style.maxHeight = ‘0px’

but that did not do it.

Thanks.

7

JohnB.

FYI. I resolved the problem with DIV closing closing instant. So now it also closes slow as with opening.
If you want to know how I did, take a look at the JavaScript code at bottom of that page.

Cheers :slight_smile:

1 Like
8

That looks a lot better.

I am pleased you replied with your solution for the benefit of other users who may have a similar problem.

All that’s required now is to clear the following errors:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.anoox.com%2Fpaid%2Ffaq_about_anoox_advertising.php

Also try to make the page more mobile friendly:

https://search.google.com/test/mobile-friendly?id=gSxIXLadDGcL6Rzy7pAeow

9

Yes, our Site currently is not done for Mobile usage, so it lacks Responsive Design CSS. It is currently for PC users only. It is due to the fact that we are a non-profit search engine & social network operating this MASSIVE network mainly with Donations. And we have not had to date much Donations to go beyond PC based version and to support development of the Mobile version. If you want us to do the Mobile version of the Site, then make a generous Donation. Although, to be exact, given the massive size of the Site, we would need at least $500K in donations to do Mobile version of the Site. Now to put things into perspective to how much we have done with minimum resources we have, Google Facebook, search engine & social network spend $500K per Day if not per Hour. Cheers :slight_smile:

10

Woah. Really?

I’ll do it for $250K :slight_smile:

2 Likes
11

Your site is missing out on the benefits of being Mobile Friendly because I believe Google gives SEO preferences to validated web pages. As you may well know about 60% of traffic comes from Mobiles and Tablets!

Why restrict your exposure?

Did you take the time to read why the web-page was not Mobile Friendly? I did and noticed there was a good chance of a simple fix which would achieve the desired result.

The source script and related files were:

  1. downloaded to my Localhost then uploaded to my server

  2. a single meta head tag line was added to the web-page

  3. uploaded the modified file

  4. validation results of Google Mobile Friendly Test

  5. Results:

    Screenshot%20from%202018-09-10%2007-45-43
    Screenshot%20from%202018-09-10%2007-45-431026×914 147 KB

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.