Textpattern CMS

#1 2015-04-29 04:27:15

jstubbs

Moderator

From: Hong Kong

Registered: 2004-12-13

Posts: 2,395

Website

Looping article_custom

Having a brain freeze today and maybe someone can help me out with an article_custom looping problem. Trying to implement a Foundation tab element which uses this markup:

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

Here’s the tentative code so far. Note the second article_custom call, used because <div class="tabs-content"> should not be contained in the loop. Unfortunately, this results in a Console error SyntaxError: DOM Exception 12: An invalid or illegal string was specified. and the tabs don’t work, although the resulting markup is correct.

<ul class="tabs vertical" data-tab>
		<txp:article_custom id="1025,1026,1027" sort="custom_2">
			<li class="tab-title<txp:if_first_article> active</txp:if_first_article>"><a href="#<txp:article_id />"><txp:title /></a></li>
		</txp:article_custom>
			<div class="tabs-content">
		<txp:article_custom id="1025,1026,1027" sort="custom_2">	
			  <div class="content<txp:if_first_article> active</txp:if_first_article>" id="<txp:article_id />">
				<txp:body />
			  </div>
		</txp:article_custom>
			</div>
		</ul>

Not having much success so far with the <txp:variable /> tag, any ideas? I’m sure its simple but escapes me at the moment..

---

Textpattern Tips

#2 2015-04-29 04:56:27

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: Looping article_custom

I think it’s a problem with the position of the </ul>.

#3 2015-04-29 10:51:21

etc

Developer

Registered: 2010-11-11

Posts: 5,053

Website GitHub

Re: Looping article_custom

It’s probably <div ... id="<txp:article_id />"> with id not starting with a letter.

---

bloatware

#4 2015-04-30 12:17:41

jstubbs

Moderator

From: Hong Kong

Registered: 2004-12-13

Posts: 2,395

Website

Re: Looping article_custom

etc wrote #290289:

It’s probably <div ... id="<txp:article_id />"> with id not starting with a letter.

Bingo! Thanks a lot GugUser and Oleg!! Final code for the interested:

<ul class="tabs vertical" data-tab>
		<txp:article_custom id="1025,1026,1027" sort="custom_2">
			<li class="tab-title<txp:if_first_article> active</txp:if_first_article>"><a href="#tab<txp:article_id />"><txp:title /></a></li>
		</txp:article_custom>
			<div class="tabs-content">
		<txp:article_custom id="1025,1026,1027" sort="custom_2">	
			  <div class="content<txp:if_first_article> active</txp:if_first_article>" id="tab<txp:article_id />">
				<txp:body />
			  </div>
		</txp:article_custom>
			</div>
		</ul>

---

Textpattern Tips