Hide/Display a post on a page with a link?

  • Unknown's avatar
    vcyrenne · Member ·

    Hi, I am using the Photographer Premium theme for cybelephoto.ca. I would like my price lists to switch in the same page area when people click on a button (link). I was thinking about putting each price list in a different post and display one at a time via a series of buttons, kind of a tab menu (each button is a tab displaying one price list). Is it possible to do it with any included WordPress function, or with the Custom CSS?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I think I understand, but by chance do you have a link to a site that has this?

    You can certainly create buttons for use in a page and link them to posts. Basically you would put a text link, or create an image of a button and link that to whatever post you desired. The post could open in a new tab/window or in the same window (it would replace the content on the page where the button was.

    If you use a text link, CSS can be used to style that button and then a class would be added to the link HTML.

  • Unknown's avatar
    designsimply · Member ·

    I think this example is the kind of thing you’re looking for:
    http://codepen.io/wallaceerick/pen/ojtal

    Here is a modified example you can try. The HTML should be added to the page itself using the Text tab in the editor:

    <ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked="">
        <label for="tab1">Description</label>
        <div id="tab-content1" class="tab-content">
          <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </li>

    <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Specification</label>
        <div id="tab-content2" class="tab-content">
          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p>
        </div>
    </li>
</ul>

    And here’s the CSS which you would want to add to the Appearance > Customize > CSS editor:

    .tabs {
  min-height: 333px;
  color: #fff;
  width: 93%;
  list-style: none;
  position: relative;
  padding-top: 0;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs label {
  display: block;
  padding: .8em 1.2em;
  border-radius: 3px 3px 0 0;
  background: #8e44ad;
  cursor: pointer;
  position: relative;
  top: 4px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: #703688;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  padding: 25px;
  position: absolute;
  top: 53px;
  left: 0;
  background: #612e76;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

    That will implement the example from the page I linked earlier, but it doesn’t adjust height automatically for mobile, so you would need to use media queries for that:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Here is an example:

    @media screen and (max-width: 1024px) {
	.tabs {
		min-height: 400px;
	}
}
@media screen and (max-width: 400px) {
	.tabs {
		min-height: 600px;
	}
}

    You are on your own to adjust it. Once you’ve changed out the HTML inside the “tab-content” elements with your pricing info, you can adjust the min-height values to what works best for your content. It looks like it will work best if each area has about the same amount of content.

    Setting something like this up will take some work, and it’s just one possible example. If you want to try a different one, try searching around on the internet to see what else you can find.

  • The topic ‘Hide/Display a post on a page with a link?’ is closed to new replies.