Jquery show and hide not working

JavaScript
1

I have what seems to be a reasonably easy show hide function, but its not working on the page below in the testimonial section.

Dev site

This is my code -

<p class="minimize"><?php echo $testDesc; ?></p>
<script>
jQuery(function(){
var minimized_elements = $('p.minimize');
minimized_elements.each(function(){    
var t = $(this).text();        
if(t.length < 100) return;
    
$(this).html(
t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+
<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
 );
}); 

$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
 $(this).next().show();        
 });

$('a.less', minimized_elements).click(function(event){
 event.preventDefault();
$(this).parent().hide().prev().show().prev().show();    
});
});
</script>

I’m wondering if I’m missing an include, but I cant seem to worki it out which one

2

Does your code editor color the code? Because if so, you’ll see that an opening string quote symbol is missing.

3

Hi Paul,

Im using Dreamweaver and it usually does, but its not showing a problem, can you point it out please

4

Start looking around the hidden span tag.

5

lol Paul, :confused:

Here?

 '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'
6

Yes - I see that you’ve now added an opening quote at the start of the string.

7

Ah sorry, it was missing from the original post sorry paul, but its in my code, thats why I got confused, and in fairness didnt help, so sorry about that.

8

Hunh. That’s funny. It works for me.

9

Take a look at the browser console when going to your dev site.

10

Typical, there didnt seem to be a problem.

Maybe Ive got a conflict with some .js files, and ye I did that, but couldnt find anything related to it, unless I missed it

11

How did it the browser console turn out for you when visiting your dev site? That’s where you’ll find info towards the next solution.

12

Seems to be mostly google map/api stuff

13

I see an important one, in red.

The one that says:
Uncaught TypeError: $ is not a function (index):415

1 Like
14

Oh dear, I have started writing a book of prompts to help with this issue.

Look at line ... Why does ...

Does ... work instead of the ...? While that might ..., it's not ... because ...

... is commonly why ... works and ... doesn't. Is that somewhere ...

Do not remove ..., instead understand why ...

Line ... starts with ...

Why is it a good idea to ... in ...? Details on ... is found at ...

There you will see info on ..., where ..., making it ...

Let’s hope that I don’t have to use all of them.

15

Im using web console in Firefox, so cant see that error, but will google what youve pointed out and see what the issue is.

Thanks for the support

I got it now, I can see the error, I’ll see what it means and try and fix it.

Thanks again

16

Look at line 415. It’s where you first use the dollar symbol. Why does the dollar symbol not work, even though you are inside the jQuery wrapper?

17

Is it because of the inverted commas?

var minimized_elements = $('p.minimize');

Or do I need to declare the p as an html elements, I’m not 100%, as you can tell

18

Nope, it’s nothing to do with the quotes.

Does jQuery work instead of the $? While that might work, it’s not a good solution because you will need to use jQuery all over the place, and secondly you haven’t yet understood why the $ symbol is not working as expected.

19

noConflict is commonly why jQuery works and $ doesn’t. Is that somewhere one the page?

Do not remove noConflict, it’s there for good reason. instead understand why it’s there in the first place. Commonly it’s because another library also wants to use $ for its own purpose.

As noConflict is there for good reason, do you know of some other way to get the $ symbol working properly?

1 Like
20

Would this be the answer

jQuery(document).ready(function ($) {

dom isnt built