Streaming live at 10am (PST)

Problem with Show/Hide transitions


#1

I can't figure out how to get a particular effect using Show/Hide transitions. Unfortunately, for confidentiality and IP reasons, I cannot give outsiders access to our full website, and Webflow doesn't provide a way to share just a portion of a website (a serious deficiency, in my opinion). Since I don't have time at the moment to recreate an example of my problem in a brand new website, I will attempt to explain the issue in prose.

Fortunately, there is a webpage that shows exactly what I am trying to achieve: http://www.elitedestinationhomes.com/ownership/

If you scroll down this page, you will find a list of topics with a red arrow to the left of each topic. If you click on any topic, the hidden text is revealed. If you click on the topic again, the text is hidden. If you click on another topic with the previous topic's text revealed, the previous topic's text is hidden and the new topic's text is revealed. If you go back to the previous topic and click on it again, the text is revealed again. This last effect is what I cannot figure out how to do in Webflow.

I have been able to duplicate most of the show/hide behavior. For my own list of topics, I have no problem revealing the hidden text when a topic is clicked, and I have no problem hiding the previous topic's text when a new topic is clicked. What I can't figure out how to do is to re-reveal the text of a topic I have previously clicked on AFTER I have clicked on another topic. The problem seems to be that the second click transition for the previously-clicked topic -- a hide the text transition -- is not "forgotten" after clicking on another topic, so the text remains hidden instead of revealed.

Let me explain it a different way. For any given topic, I have no difficulty creating a two-click show/hide transition. The first click reveals the text and the second click hides the text. If I click back and forth on the same topic WITHOUT clicking on another topic, the show/hide cycle works fine.

However, the problem starts when I click on topic #2 while the text for topic #1 is still revealed. I have created a series of transitions for the first click on any topic first hides the text for the previously-clicked topic and then reveals the text for the topic just clicked on. So far, so good. As long as I keep clicking on new topics, the text of each new topic is revealed and the text for the previously-clicked topic is hidden.

However, if I click AGAIN on topic #1 after clicking on topic #2 (which hid topic #1's text), topic #1 does not reveal its text again. Instead, topic #1 "remembers" that it still has a second click transition to activate -- a "hide" transition -- so nothing at all happens when I click again on topic #1 because the text was already hidden by topic #2.

The behavior I want is for topic #1 to be "reset" after its text is closed by topic #2 so that topic #1's first click transition is activated instead of the second click transition. I guess my core question is, how do I get each individual topic to "forget" the second click if the text has already been hidden by a "hide" transition activated by another topic?

Again, the link to the example website shows exactly what I want to achieve. There, I can show and hide text at will no matter where I click or the order in which I click.

Gosh, I hope that all make sense. Even my head spins a little bit when I reread it. If I have failed to communicate, feel free to ask questions.

Thanks! Bill


A toggle trigger or 'reset' first click to fix first/second click trigger problems
#2

Hello @Bill616,

I have some suggestion. What if you will try to use "dropdown" widget for this? It may sound crazy and behind this will be a little bit weird code, but I know some designers from our community used that.

Regards,
Anna


#3

Thanks, Sabanna, that sounds like it might be a good work-around solution and I will give it a try.

Nevertheless, I find it frustrating and disappointing when I have to resort to a work-around. The effect I want to create is what transitions are made for, and yet Webflow's implementation of transitions is too simplistic to finish the job. Of course, I didn't figure that out until I had spent significant amounts of time trying different solutions because I believed it was my lack of knowledge or understanding, not the software. The more I learn about Webflow, the more I am discovering that, in many cases, it IS the software. For all its promise, there are far too many deficiencies in Webflow and the documentation is much too sparse. Consequently, much of my time in the designer is spent doing a lot of trial and error trying to figure out how something really works. At times, Webflow feels more like a brainteaser puzzle than productive software.

Anyway, if the dropdown widget does the trick, I have you to thank.

Ciao! Bill


#4

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