One of the things that was on my wish list as a consultant was a way to show potential clients a clean, easy-to-read proposal. Something that was consistent with my brand, could be created and shared easily, and that I could update or customize as much as I wanted to.

The most important thing for me was having all the information for each proposal in one post, but I wanted to break it up into sections that could be navigated through like a typical website.

Each menu item in the navigation bar would link to a section of the proposal, but I didn’t want the webpage to reload on every click.

Enter the ^ selector and jQuery. [Thanks to slipsum for some ipsum, and some swears.]

After planning out each section, the headings I needed, subsections and the overall flow I was able to create the custom post type. Then in the proposal template file, I pulled in each section under a specific ID, using “div_” at the beginning of each ID name.

The caret (^) selector in jQuery allowed me to select all divs with an id that started with “div_”. See here for more info.

To create the behaviour I wanted, I used .hide() on all the divs I didn’t want to show, while making sure to single out the section(s) I did want displayed with .show().

To start with, I created an intro ‘page’ that would be attached to each proposal. This would be the first thing users see when they land on the page, so all of the proposal sections needed to be under .hide() when the page loads.

Then once the user clicks on a menu item, all the “div_” sections are hidden, except for the one corresponding to whichever item was selected [I used .attr() to remove menu item links].

The title of each post would be the client’s name, so I used a .click() method on that to .show() all the sections (except for the intro) so the proposal could be viewed in full.