Six hidden sections and the images that reveal them
Hidden Section 1
First create your content. You’ll want to set up your six sections that will be hidden/revealed, as well as the images that will reveal/hide them, and of course any other content you want on your page. Build it the way you normally would, keeping in mind how it will look with the sections hidden/revealed. For this demo, I’ve set up an extremely simple page, as you can see here. (Of course I added/altered some rows farther down after this screenshot was taken, but the basic concept is the same.)
Hidden Section 2
Next, you’re going to make a small change to the settings of each of your images. Incidentally, I recommend using the Admin Label on each of them to remind yourself which is which. (This may not be necessary in the Visual Builder. I wouldn’t know, because the Visual Builder has never worked for me XD)
Click on the Advanced tab.
Click on “CSS ID & Classes.” Under “CSS Class,” enter a name for this image. No spaces are allowed here, so run your words together or use underscores as needed. Aside from that, call this whatever you want. For this demo, I’ve used the simple “Image#,” but elsewhere I’ve used “Chapter#Button” or ToggleSection#, etc.. As I mentioned, I like to use the Admin Label of this image module to remind me which one it is, and I usually use a CSS class name that corresponds with that label.
This step is optional, and won’t affect the functionality of your hide/reveals. If you want the mouse cursor to change to the pointing hand that (for most people) appears when they hover over a link, you’ll want to do this. If you’re happy with the mouse cursor remaining its default (usually an arrow), skip this. I’ve applied this code to only three of the six images in this demo, so you can see which way you prefer it.
Open “Custom CSS” immediately beneath the “CSS ID & Classes” section you just worked with. Under “Main Element,” insert this code: cursor: pointer;
This step is not optional. Now you need to assign a CSS class to each of the rest of your images. Repeat the same process you used for the first one, but give each image a unique class. Mine here are called “Image2,” “Image3,” etc.. If you’re using the code above to change the pointer, don’t forget to insert it into the Custom CSS of each image.
Hidden Section 3
Now you’re going to make changes to your Sections settings very similar to what you did with the images. My opinion on the Admin Labels still applies here! But more importantly, click on the Advanced tab.
The difference between your hidden sections and your images is that, while in each image’s settings you added a CSS class, here in the Section’s settings you’ll be adding a CSS ID. It’s important to keep that straight :)
Once again, what you call this ID is up to you. Obviously here I’ve used the straightforward “HiddenSection1,” but you may choose to use something more descriptive of the Section’s content like “Signup_Form_Section” or “FAQSection” or, if you’re like me, “Chapter01.”
Repeat this process for all of your hidden sections, choosing a unique ID for each. Mine are “HiddenSection2,” “HiddenSection3,” etc.
Hidden Section 4
Next you need to place the Javascript that will make the hide/reveal effect work, and you have a couple of options for where to put it. If you’re planning to use the same effect on multiple pages, it may be most convenient to go to your Divi Theme Options, click on the “Integration” tab, and place the code in the “Add code to the < head > of your blog” field.
Keep in mind that, with this option, on any other page where you use hidden sections, your Sections and Images must have the same CSS ID’s and CSS Classes as the ones on this page.
If you’re only planning to use hidden sections on this page, or if for some reason you want to use the hide/reveal effect on another page but don’t want to use the same Class and ID names, your other option is to place the Javascript on this page itself. For that, you’ll need a Code module, which I recommend putting in a discrete section/row at the top of the page. (This section will be invisible, but will affect the vertical spacing, so you’ll want to experiment with tweaking margins and such.) For this demo, I gave my Code module an Admin Label of “The Code.”
Here is the code I’ve used for this demo. It was modified from Rob Hobson’s code on divi+notes.
Hidden Section 5
Let’s take a look at this code and change it as needed. In order to make your changes, I recommend copying it into NotePad or WordPad, which will not add stupid formatting and break the code. The first thing to note is the line jQuery(‘#HiddenSection1’).hide();
You’ll observe that this line is present in all six segments of the code. It prevents the element with the specified CSS ID (in this case “HiddenSection1”) from showing up at first. So if I wanted HiddenSection1 to be visible when the page loads, I would delete this line. As it is, all six hidden sections of this demo are invisible when the page loads.
The next line to look at is the one that establishes which element we’re dealing with in this segment of the code, and starts to define its function — jQuery(‘.Image1’).click(function(e){
As you can see, in this line we’re talking about the element with the CSS Class “Image1.” The code will go on to establish what happens when that element is clicked. So if you gave your first image a CSS Class different from “Image1,” you’ll want to replace “Image1” with whatever you called your first image. If I had called mine “Brown_beetle_longer_legs,” then this line of my code would say jQuery(‘.Brown_beetle_longer_legs’).click(function(e){
The next line establishes the toggling behavior (the hide/reveal action) of the element (in this case Image1) — jQuery(“#HiddenSection1”).slideToggle();
What we’ve got so far is that Image1, when clicked, is going to toggle HiddenSection1, revealing it or hiding it depending on its current state. “HiddenSection1” is, of course, the CSS ID I gave to my first hidden Section. So you’ll need to change “HiddenSection1” to whatever you put in that CSS ID box for your first hidden Section. Since this will be referenced multiple times throughout the code, I recommend doing a Find/Replace on “HiddenSection1” so each instance of it is changed. Remember not to allow any extra spaces to sneak in there!
Some people don’t like the look of the “slideToggle” function. You can remove “slide” to get a plainer toggle effect and see which one you prefer.
The last, biggest part of the code segment finishes up defining the function of the element we’re still working with: Image1, when clicked, will hide all the specified hidden Sections. A hide function is established for each of them, so in this case there’s one for each “HiddenSection#” besides the first one. This is the reason the Find/Replace I mentioned before is useful, because of course this is repeated for each of the six Sections.
If you don’t want your toggling images to control only their corresponding segments — i.e., if you don’t want Image1 to open HiddenSection1 and also close whichever other HiddenSection# is open — you may delete these lines, but make sure the brackets and semicolons underneath remain intact!
Your last step is to look through all six segments of the code and follow the same steps. What is “Image2” in this demo needs to be changed to whatever CSS Class you assigned your second image; what is “HiddenSection2” in this demo needs to be changed to whatever CSS ID you assigned your second hidden Section; and so on. Throughout, make sure the spacing of the code remains the same — don’t insert spaces or lines where they don’t exist. If you’ve done everything correctly, the code should work, and your hidden Sections toggle appropriately when your Images are clicked!
If you want more or fewer than six hidden sections, it should be evident from this demo how to achieve that — but if it isn’t, drop me a line.
Hidden Section 6
I don’t know how to write Javascript or CSS; I just take code other people have come up with and mess around with it until it does what I want. There are probably easier, simpler ways to get things done that I would be aware of if I knew either of these languages. If you’re an expert and have an idea that would make this whole process work better, I’d be glad to hear it!
In the meantime, though, I kinda had fun putting this little guide together, and maybe I’ll do more in future. And I might go back through this one and add a few other options, such as a text link instead of an image or even the button that Rob Hobson originally described. Let me know what you’d like to see!