---
title: "Open a Hidden Gallery from a Text Link"
id: "176472"
type: "knowledgebase"
slug: "open-hidden-gallery-from-text-link"
published_at: "2019-06-27T12:40:28+00:00"
modified_at: "2019-06-27T12:40:29+00:00"
url: "https://fooplugins.com/documentation/foobox/appearance/open-hidden-gallery-from-text-link/"
markdown_url: "https://fooplugins.com/documentation/foobox/appearance/open-hidden-gallery-from-text-link.md"
excerpt: "You will need to use some custom HTML in your page or post: <a href=\"#foohiddengallery\" class=\"footrigger\">Open Hidden WP Gallery</a> <div id=\"foohiddengallery\" style=\"display: none;\"></div> FooBox Settings Make sure you add this to your FooBox settings page, under the JS & CSS..."
taxonomy_knowledgebase_cat:
  - "Appearance"
---

[Appearance](https://fooplugins.com/documentation/foobox/appearance/)

# Open a Hidden Gallery from a Text Link

## Related Articles

- [Display Settings](https://fooplugins.com/documentation/foobox/appearance/general-settings/)
- [Change FooBox Size](https://fooplugins.com/documentation/foobox/appearance/change-foobox-size/)
- [Manually Specify Different FooBox Styles](https://fooplugins.com/documentation/foobox/appearance/manually-specify-foobox-styles/)
- [Adding a Custom Loader Icon](https://fooplugins.com/documentation/foobox/appearance/adding-a-custom-loader-icon/)
- [Manually Specify Different Button Styles](https://fooplugins.com/documentation/foobox/appearance/manually-specify-button-styles/)
- [Open a PDF in FooBox](https://fooplugins.com/documentation/foobox/appearance/open-pdf-foobox/)
- [Custom Captions in FooBox](https://fooplugins.com/documentation/foobox/appearance/custom-captions/)

**Need more help?** Browse all documentation or open a support ticket.

[All docs](/documentation/)

[Support](/support/)

You will need to use some custom HTML in your page or post:

```
<a href="#foohiddengallery" class="footrigger">Open Hidden WP Gallery</a>
<div id="foohiddengallery" style="display: none;"></div>
```

### FooBox Settings

Make sure you add this to your FooBox settings page, under the JS & CSS tab, the “Custom JS (pre)” setting:

```
$('.footrigger').click(function(e) {
	e.preventDefault();
	var hiddenAreaId = $(this).attr('href');
	$(hiddenAreaId).find('a:first').click();
});
```

## Demo 2

You can also use your own set of images if you do not want to use a WP gallery. This method will use the same FooBox Settings from above. Create a link:

```
<a class="footrigger" href="#foohiddengallery2">Open Hidden Images</a>
```

Then create a hidden div which contains your images:

```
<div id="foohiddengallery2" class="foobox" style="display: none;">
	<a href="Graffiti-Wall.jpg"></a>
	<a href="From-Inside-Building.jpg"></a>
	<a href="Demolished-Buildings.jpg"></a>
</div><br>
```

### Please Note

1. In Demo 2 you do not need to include the thumbnail images in the anchor tags, as these are never shown.   
2. In Demo 2 to get FooBox to bind to the anchors, make sure the container has the attribute: `class="foobox"`

Resources

## Find the right next step

Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages.

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Documentation

Search setup guides, product docs, and troubleshooting articles.

[Browse docs](/documentation/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Support

Open a ticket with product details so we can help quickly.

[Get support](/support/)

![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)

### Licensing

Review account, renewal, refund, and license information.

[View details](/licensing/)