Hide/Show JQuery/JS Function

[Alan Vende]

I am creating a plugin over on a test forum of mine, and I am running into a few problems with a piece of code that I'm attempting to use.

I wanted to have a button in the plugin (which I have accomplished) and I wanted that button to show/hide a div.

I searched Google and found a few pieces of code, and the one below seems to be the closest to what I want:

// JS from https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
$(document).ready(function(){
   $("button").click(function(){
       $(".ppaffiliates").toggle();
   });
});
My HTML is

<div class="affiliatebutton">
<button>Click to view our affiliate code and rules</button>
</div>
<div class="ppaffiliates">
           <div class="ppaffrules">
               <div align="center" class="ppaffcodecontainer">
                   <p class="ppaffcodetitle" align="center">Our Affiliate Code</p>
   <p><textarea readonly="true" onclick="this.select()" style="width: 1200px; height: 15px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
           </div>
               <div align="center" class="ppaffrulestext">
               <p align="center" class="ppafftextheading">Our Affiliate Rules</p>
               <p align="center" class="ppafftextbody">Like many other forumes, ours has rules governing our affiliation with other forums. Please take a minute to review them by clicking the button below.</p>
                   <div align="center"><a href="http://psychic-psyghtings.proboards.com/thread/978/affiliate-psychic-psyghtings"><button>Psychic Psyghtings Affiliate Rules</button></a></div>
               </div>
               </div>
</div>

Is there a way to make it so the content is hidden on page load and then you have to click the button to toggle it open and then closed again?

The code is from this page.

I had changed the code from the $("p").toggle(); to $(".ppaffiliates").toggle(); because I wanted the div to toggle, not just the paragraphs within the div, and it seems to have worked, just the opposite of how I envisioned it It's showing on page load and showing/hiding when you click the button. I wanted it to be hidden on page load and then you click the button for it to show/hide. Does that make sense? The functionality I want is accomplished here, and I used the code initially to see how I wanted it to work, but now I'm attempting to search for other options when I bring this live on my main forum. I didn't want to look like I was copying anyone; I just wanted to see how it worked so when I searched for a code I knew what I was looking for.

Thanks so much for your help/insight. I've been trying to research this for the past three hours with minimal success...

[Lynx]

In this line:

$("button").click(function(){


does your button have an ID or class? If so, use your button's ID or class (or add one to it to give it one):

$(".mybutton").on("click",function() {


[Alan Vende]

The button itself, no. I used the class from the div element that I wrapped the button in as the class for the JS because I had found that even if I put a class on the button, if I added more buttons to the plugin that the toggle would happen on both, regardless of whether one had a class or not.

Sorry, I put the old JS that I had. The current JS is:

// JS from https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
$(document).ready(function(){
   $(".affcodeandrules").click(function(){
       $(".ppaffiliates").toggle();
   });
});
I thought I had updated that, my apologies.

EDIT:

The HTML is now:

<button class="affcodeandrules">Our Affiliate Code and Rules</button>
       
<div class="ppaffiliates">
           <div class="ppaffrules">
               <div align="center" class="ppaffcodecontainer">
                   <p class="ppaffcodetitle" align="center">Our Affiliate Code</p>
   <p><textarea readonly="true" onclick="this.select()" style="width: 1200px; height: 15px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
           </div>
               <div align="center" class="ppaffrulestext">
               <p align="center" class="ppafftextheading">Our Affiliate Rules</p>
               <p align="center" class="ppafftextbody">Like many other forumes, ours has rules governing our affiliation with other forums. Please take a minute to review them by clicking the button below.</p>
                   <div align="center"><a href="http://psychic-psyghtings.proboards.com/thread/978/affiliate-psychic-psyghtings"><button>Psychic Psyghtings Affiliate Rules</button></a></div>
               </div>
               </div>
</div>
I put the class on the button and removed the div surrounding it. I guess it didn't work when I attempted the class because I didn't have it coded the way you put in your post. Thank you for that!

It still is showing on page load, though. I'm guessing there's no way to have it "default" to hidden on page load so you click the button to toggle it open?

[Chris]

After you setup the click handler then try calling the handler to change the toggle state:

// JS from www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
$(document).ready(function(){
$(".affcodeandrules").click(function(){
$(".ppaffiliates").toggle();
}).click();
});

It'll get a smidgen more complicated once the decision is made to make the choice persistent and not just reset on page load (most people eventually gets there) but for now making that initial call to set the state should do it.

[Alan Vende]

That worked. Thanks so much, Chris. I feel like a ditz for not realizing to put }).click(); at the end...

This is one of the first times that I've ever used/tried to manipulate Javascript, so I'm still semi-new to it.

Thanks so much for your help and your insight. It is truly appreciated!

[Alan Vende]

Chris : Sorry, this thought just popped into my head. Would it be possible to write the JS so I could have more than one button toggle, or should I only have one toggle and make the other one so it is a link?

When I was thinking of having more than one toggle, my thought was:

// JS adapted from www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
$(document).ready(function(){
$(".affcodeandrules", ".newclass").click(function(){
$(".ppaffiliates", ".newclass").toggle();
}).click();
});

...but when I did that, it made it so neither of the buttons toggled, which made me wonder if I wrote it wrong.

Since it looks like I did, how close am I to the correct way of writing it? Is my attempt close at all? As I think I said earlier in this thread, I'm new to JS, so I'm still trying to learn and I think the best way to learn is to ask questions and such of people who understand it because for me online videos and tutorials only go so far.

Thank you for your insight!

[Chris]

$(".ppaffiliates, .newclass").toggle() might have worked (notice single string passed in not two) but I'm not sure you want to add the same toggle to both buttons unless they are meant to affect the exact same area. The analogy would be having a light switch at the bottom of the stairs and another at the top and either one would be able to control the light illuminating the staircase, you wouldn't however want one of those light switches just randomly controlling the light in little Bobby's bedroom or the garage door, those should really have their own light switch and be wired separately.

[Alan Vende]

Thanks so much for the insight, Chris. Now I realize why some plugin authors who utilize the toggle() function only have one button that executes that.

Thank you for all of your help. It is truly appreciated!