Hello lovely community. I am very new to web design and don’t really know much. I did a search to try and find an example of code for what I am trying to achieve here, but I’m unsure how to incorporate it into my post.
My problem: My post is a very long list of game recommendations with dates. To better the user experience, I want to shrink it down so people are scrolling for long periods and can get to where they want quicker.
Solution? Making each date a drop down section. So when someone clicks on, say August 1st, it drops down a section to reveal the game releases on that date.
The code I found that does what I’m trying to achieve
The post I am trying to improve the user experience on
I’ve tried putting the first part of the HTML at the start of the section I want to wrap, and but it didn’t have an effect. I’m guessing I need to do something with the ‘code injection’?
If I can’t get this to work, I’ll probably just resort to a content table with anchors. That seems simpler. But ideally I would love to reduce the amount of scrolling time on the post.
If it’s all text, the built in toggle card would be the way to go.
If it isn’t, then you can probably adapt the content in the jsfiddle you linked. Put the css section within <style> -put stuff here- </style>. Put the javascript between <script> </script>
The css and js could be in your page’s code injection, site-wide (if you want this regularly), or in an html card on the specific page. Note that that javascript is using jquery, so if your theme isn’t loading it, you’ll need to add that also. (Or rewrite to not use jQuery - jQuery is super overkill for that.)
Then, to actually mark out the sections that toggle, make TWO html cards to surround your content. In the first one, put:
<a id="show_div" href="#" class="show">Browse Styles</a>
<div class="slide">
The Ghost editor will probably try to add an extra </div> at the end. Don’t let it.
Then put whatever content you like, using the Ghost editor (text, images, cards, etc).
Then, to mark off the end of the content that should slide/reveal, add another html card, this one containing:
</div>
(Again, don’t let Ghost ‘help’ by adding extra tags.)
1 Like
Hello Cathy! Thanks for the help!
I’m probably doing something wrong here, but the result I’m getting is not great.
The first part works, it shows up hidden like I want it (although I guess I need to change the styling to get rid of the white highlight and font colour)
But then when I click on it, it snaps to the top of the web page and scrolling down it looks like all of it is squashed and overlapping.
I put both the style in the Header of the Code Injection, and because I wasn’t sure where to add the JS script, i also put that in the header after the style. Also, might be worth noting, that all the boxed content are made using the ‘Call To Action’ cards, as they worked very well as elements to include an image, writing, and, and button.
There’s a hard-coded 200px height in the css for the .slide element. That’s likely your problem.
1 Like
Thank you so much for the help, and sorry for the late reply.
I’ve got it working now, I adjusted the height and asked a friend to explain some other parts of the code to improve it.
