Expand and hide text with Jquery

Nov 25th, 2013 at 11:05 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

I'm trying to get this to work:
http://sylvain-hamel.github.io/simple-expand/
I just want the simplest version (1st demo), but of course it's beyond me. :P

On my test page, the "click me" link shows up and the text below it is hidden as it should be. But when I click the link, nothing happens, the text stays hidden.
http://calda.coffeecup.com/test.html

I started with http://jedfoster.com/Readmore.js/ because it seemed simple; several hours later, here I am with nothing done. :lol:




I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Nov 26th, 2013 at 01:20 AM
User 2147626 Photo

SadDuck
Ambassador
2,958 posts

It may just be a 'link' problem.
You know me, I'm no coder...but your link just adds a '#' at the end.
Doesn't really look like a link...
This is what I see http://calda.coffeecup.com/test.html#

Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
Nov 26th, 2013 at 08:47 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,247 posts

You didn't include the actual JQuery library at the head of your page.;)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Nov 26th, 2013 at 10:13 AM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

I have it on the actual page I'm trying to use this on, plus the link to the simple-expand.js file, but no go.
So, I'm linked to the Jquery library, linked to the .js file on the site, have the .content {display: none} in the CSS and the script on the page.....
...............
<style type="text/css">
.content { display:none; }
</style>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec porta porttitor tellus sit amet cursus. Morbi nulla odio,
blandit ac interdum at, consectetur eget purus. Ut cursus rhoncus.</p>

<a class="expander" href="#">click me</a>
<div class="content">
<p>neque, in rutrum diam congue in. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta
porttitor tellus sit amet cursus. Morbi nulla odio, blandit ac</p>
</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

<script src="js/simple-expand.js"></script>

<script>
$(function () {
$('.expander').simpleexpand();
});
</script>

</body>
</html>

I'm guessing whatever works on the content div is within the .js file?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Nov 26th, 2013 at 12:53 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,247 posts

If you want to copy my source code you can.
http://ericrohloff.com/coffeecup/ccforu … xpand.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Nov 26th, 2013 at 11:48 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Thanks, Eric.
I'll have a go at this tomorrow. Long day at work followed by Thanksgiving grocery shopping.... No work tonight! :D
I am curious though... <a class="expander" href="#">click me</a>.... my # isn't underlined; does that matter?
Also, why the heck don't they mention you need to put everything in an additional class and id???
<div class="demo-frame">
<div id="demo-simplest">
Since this is going into an already established div, I didn't create additional divs for it. :P
If you hear a loud bang tomorrow... don't worry, it's just my head exploding :lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Nov 27th, 2013 at 07:52 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,247 posts

The instructions on that page are lacking a little. I'm sure it's all clear to the author.:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Dec 4th, 2013 at 11:44 AM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Eric, I'm still missing something here.
I copied your code to my page. Created a separate style sheet. Still can't get the link to open the text. Instead, it links to the top of the page. :o (there are several anchor links on this page)
The one difference I see is the underline I mentioned before, you have an underline on the # in here:
<a class="expander" href="#">Click me</a>
Is that important? And how does it get there?
Should I use something else in place of the #?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Dec 4th, 2013 at 02:50 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Nevermind...just realized it has to be 'live' to work. :lol:
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
Dec 4th, 2013 at 03:29 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,247 posts

I don't see my link underlined.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.