Learn

Share Your Knowledge!

This fast-growing section of our site is the new one-stop shop for educational materials for ExpressionEngine with rich and expert content, from both EllisLab and the community. Submit your article, tip, or solution today!

  • Toggling Content

    12/10/2016 in: Front-end Development, Tips

    Occasionally you have some information that is needed, but not the most important, and you may want to hide it away, and let the visitor decide when they want to see it. So you toggle that content! Here’s a simple and fast way to add this functionality to your website, it’s reusable and can appear multiple times in a single HTML document.

    Let’s start with the JavaScript. I used jQuery.

    $(function(){
    
    	$('.toggle-link').on('click',function(e){
    		var txtIs = $(this).attr('data-open');
    		var hideIs = $(this).attr('data-close');
    		var objIs = $(this).attr('data-rel');
    		var toggleObj = $('[data-rev='+objIs+']');
    
    		if($.trim($(this).text()) === txtIs){
    			$(this).text(hideIs);
    		}
    		else{
    			$(this).text(txtIs);
    		}
    
    		toggleObj.toggleClass('toggle-open');
    
    		// stop THIS href from loading
    		// in the source window
    		e.preventDefault();
    	});
    
    }); // close (document).ready

    This will listen for .toggle-link clicks and then open and close (toggle) the proper .toggle-content for you.

    Here is the HTML

    <h1>Content Header <a href="#" class="toggle-link" data-rel="toggle-test" data-close="Hide" data-open="Show">Show</a></h1>
    <div class="toggle-content" data-rev="toggle-test">
    	<p>This content is hidden, until the toggle-link is clicked.</p>
    </div>

    The important bit to remember here is that the values of data-rel and data-rev need to match, and need to be unique from any other pairs in the same HTML document.

    The value of data-close determines what the link’s text will be when the content is visible. And the value of data-open determines the text when the content is hidden. The text in the link should match the value of data-open.

    And lastly, just a little CSS to get our open and closed states.

    .toggle-content{
    	display: none;
    }
    
    .toggle-open{
    	display: block;
    }

    You can demo and play with this code here: https://jsfiddle.net/jmathias/bqf3ht3y/

    So there you have it another tool for your next ExpressionEngine CMS site.

    | Read in 2 minutes
  • Staff Channel Set

    5/13/2016 in: Resources, Channel Sets

    Quickly create a Staff Channel in ExpressionEngine for your employees with this Channel Set.

    The Staff Channel Set comes with custom fields to get you up and running fast. Further customizations can be made to tailor to your needs, but here’s what’s inside:

    Custom Fields

    • {staff_biography}: a Textarea for the staff member’s bio
    • {staff_email_address}: an Email Address field for their email address
    • {staff_phone_number}: a Text field for their phone number
    • {staff_position}: a Text field for their position / job title

    Sample Tags

    {exp:channel:entries channel='staff' order='title' sort='asc'}
    	{if count == 1}
    		<h1>Staff Members</h1>
    		<ul>
    	{/if}
    
    			<li>
    				<h2>{title}, {staff_position}</h2>
    				<p>Email: {staff_email_address}<br>Phone: {staff_phone_number}</p>
    
    				{staff_biography}
    			</li>
    
    	{if count == total_results}
    		</ul>
    	{/if}
    {/exp:channel:entries}
    | Read in 1 minute
  • Event Channel Set

    5/13/2016 in: Resources, Channel Sets

    Quickly create an Event Channel in ExpressionEngine with this Channel Set.

    The Event Channel Set comes with custom fields and statuses to get you up and running fast. Further customizations can be made to tailor your event display, but here’s what’s inside:

    Custom Fields

    • {event_address}: a Text field for the physical address of the event
    • {event_contact}: a Grid field to contain contact info for the event
      • :name - a Text field for the contact’s name
      • :position - a Text field for the contact’s position / title
      • :phone_number - a Text field for the contact’s phone number
    • {event_description}: a Textarea to describe the event
    • {event_related_events}: a Relationship to similar / related events

    Statuses

    • Open: published
    • Closed: not published
    • Featured: to call special attention to an event, typically on the homepage

    Sample Tags

    {exp:channel:entries channel='event' limit='1' require_entry='yes'}
    	{if no_results}
    		{redirect='404'}
    	{/if}
    
    	<h1>{title}</h1>
    
    	<p>{event_address}</p>
    
    	{event_description}
    
    	<h2>Contact Info</h2>
    	<ul>
    		{event_contact}
    			<li>{event_contact:name}, {event_contact:position}: {event_contact:phone_number}</li>
    		{/event_contact}
    	</ul>
    
    	{if event_related_events:total_results > 0}
    		<h2>See Also</h2>
    		<ul>
    			{event_related_events}
    				<li><a href="{event_related_events:url_title_path='event/index">{event_related_events:title}</a></li>
    			{/event_related_events}
    		</ul>
    	{/if}
    {/exp:channel:entries}
    | Read in 2 minutes
  • Game Channel Set

    4/22/2016 in: Resources, Channel Sets

    Quickly create a Game Channel in ExpressionEngine with this Channel Set.

    The Game Channel Set comes with three Channels and custom fields to get you up and running fast. Further customizations can be made to tailor for your teams, but here’s what’s inside:

    Game Channel

    Custom Fields

    • {game_location}: a Text field for the location of the game
    • {game_start_time}: a Date field for the official start time of the game
    • {game_teams}: a Grid field to select which teams are playing in the game
      • :team - a Relationship to the Teams Channel
      • :location - Indicator for whether this team is playing as Home/Away

    Player Channel

    Custom Fields

    • {player_biography}: a Textarea for the a player’s bio
    • {player_eligible}: a Toggle field to indicate if the player is eligible to play, or is injured or otherwise ineligible
    • {player_height}: Text field for the player’s height
    • {player_hometown}: a Text field for the player’s hometown
    • {player_position}: a Text field for the player’s field position
    • {player_weight}: Text field for the player’s weight

    Team Channel

    Custom Fields

    • {team_history}: a Textarea for the team’s history
    • {team_home_field}: a Text field for the name of the team’s home field
    • {team_homepage}: a URL field for the team’s website
    • {team_mascot}: a Text field for the team mascot’s name
    • {team_roster}: a multiple Relationship to the Player channel

    Nafai

    {exp:channel:entries channel='game' limit='1' require_entry='yes'}
    	{if no_results}
    		{redirect='404'}
    	{/if}
    
    	<h1>{title}</h1>
    
    	<p>{game_location} on {game_start_time format='%D, %F %d, %Y - %g:%i'}</p>
    
    	<h2>
    		{game_teams}
    			{game_teams:team}{game_teams:team:title}{/game_teams:team} ({game_teams:location})
    			{if game_teams:count < game_teams:total_rows}vs.{/if}
    		{/game_teams}
    	</h2>
    
    	{game_teams}
    		{game_teams:team}
    			<h3><a href="{game_teams:team:team_homepage}">{game_teams:team:title}</a></h3>
    
    			{game_teams:team:team_history}
    
    			<h4>Roster</h4>
    			<ul>
    				{game_teams:team:team_roster}
    					<li {if ! game_teams:team:team_roster:player_eligible}class="ineligible"{/if}>
    						<b>{game_teams:team:team_roster:title}, {game_teams:team:team_roster:player_position}</b><br>
    						<i>{game_teams:team:team_roster:player_height}, {game_teams:team:team_roster:player_weight}</i><br>
    						From: {game_teams:team:team_roster:player_hometown}
    					</li>
    				{/game_teams:team:team_roster}
    			</ul>
    		{/game_teams:team}
    	{/game_teams}
    {/exp:channel:entries}
    | Read in 3 minutes
  • Media Portfolio Channel Set

    4/15/2016 in: Resources, Channel Sets

    Quickly create a Media Portfolio Channel in ExpressionEngine for your work with this Channel Set.

    The Media Portfolio Channel Set comes with custom fields, statuses, and categories to get you up and running fast. Further customizations can be made to tailor your portfolio, but here’s what’s inside:

    Custom Fields

    • {portfolio_images}: a Grid field for images of your work
      • :image - a File field to hold the image
      • :caption - an optional Textarea to provide a caption to the image
    • {portfolio_description}: a Textarea to describe your work
    • {portfolio_files}: a Grid field for downloadable non-image files of your work (PDFs, zip files, etc.)
      • :file - a File field to hold the file
      • :description - an optional Textarea description for the file

    Statuses

    • Open: published
    • Closed: not published
    • Featured: to call special attention to the entry

    Categories

    • Branding
    • Design
    • Development
    • Print

    Sample Tags

    {exp:channel:entries channel='portfolio' limit='1' require_entry='yes'}
    	{if no_results}
    		{redirect='404'}
    	{/if}
    
    	<h1>{title}</h1>
    
    	{if has_categories}
    		<div>Categories:
    			<ul>
    				{categories}
    					<li><a href="{path='portfolio/index'}">{category_name}</a></li>
    				{/categories}
    			</ul>
    		</div>
    	{/if}
    
    	{portfolio_description}
    
    	{if portfolio_images:total_rows > 0}
    		{portfolio_images}
    			<figure>
    				<img src="{portfolio_images:image}" alt="{portfolio_images:caption}">
    				<figcaption>{blog_image:caption}</figcaption>
    			</figure>
    		{/portfolio_images}
    	{/if}
    
    	{if portfolio_files:total_rows > 0}
    		<ul>
    			{portfolio_files}
    				<li>{portfolio_files:file wrap='link'}</li>
    			{/portfolio_files}
    		</ul>
    	{/if}
    {/exp:channel:entries}
    | Read in 2 minutes

ExpressionEngine News

#eecms, #events, #releases