I want to make a accordion, and I want it to function like a site I found - accordion

It has to be able to run in Wordpress, and it also has to be able to house as many "sections" as I wish. It also has to be able to have multiple instances of the accordion with different information in each. The site that I got the idea from was http://www.steppenwolf.org/Plays-Events/.
I have next to no experience with javascript, but am proficient with HTML and CSS.
I am NOT asking you to make this for me, only help me in the building of such a thing.
I want to be able to use an unordered list to form the accordion:
<ul class="accordion-1">
<li class="accordion-item-1"></li>
<li class="accordion-item-2"></li>
<li class="accordion-item-3"></li>
<li class="accordion-item-4"></li>
</ul>
<ul class="accordion-2">
<li class="accordion-item-5"></li>
etc...

I would advise looking to see if there is already a plugin available. I did a quick search and found a jQueryUI one - http://wordpress.org/extend/plugins/jquery-ui-widgets/
This will allow you to use the Accordian plugin

Related

How to change number base and direction with emmet

In regards to an official document on emmet usage for changing number direction, the following should work in numbering values in reverse order:
ul>li.item$#-*5
But...that does not work in Visual Studio Code version 1.43.2
What is the proper emmet syntax for listing out the following numbers like so...
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
Looks like the ability to count down will be added to v1.53, see pre-release notes https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_53.md#emmet-performance-and-feature-improvements
Emmet now works much faster in large HTML and CSS files. Also, the
extension now uses the latest Emmet dependency, meaning that features
such as countdowns are now supported.
It looks like you had the proper syntax.
------ previously ::
It doesn't work in vscode. See https://github.com/microsoft/vscode/issues/87657 and https://github.com/microsoft/vscode/issues/69168 and https://github.com/microsoft/vscode/issues/35296.
It is on the Backlog but deosn't appear to being actively addressed. Vote up the issues.

...Show More on Accelerated Mobile Pages (AMP)

I am creating an amp for my webpage. It contains lot of description about places. I want to implement ..show more after 4 lines so that user can see other content also in the mobile first fold (Text is dynamic so can be less than 4 lines also. In that case how can i determine that show more will not come) Is this possible with AMP?? Since I cannot use javascript and css solution is not possible for this, please help me in finding alternatives for the same. I have searched a lot about this but no luck so far. Thanks in advance
You can use an amp-accordion for this:
<p>The first four lines...</p>
<amp-accordion disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
</h4>
<p>The remaining text... </p>
</section>
</amp-accordion>
Here is a working example.

Just wanted to know is the below code is wrong or it will work for ranking schema?

itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating"
Though I know the correct syntax is
itemscope itemtype ="http://schema.org/AggregateRating"
But wanted to know can we write
itemscope="" itemtype="http://schema.org/AggregateRating""
Because Google structure validation tool is not showing any erros and even Google webmasters tools is not showing any errors.

Best practice for ion tags

I am a bit confused about tag usage in the ionic framework. If you check their docs under CSS components, you'll see they use existing tags (particularly div) with a specific class choice to achieve formatting, just like you'd expect from something like bootstrap. Example:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
If you go by their code samples, however, you see that they use custom ion tags instead. Example:
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
The same practice of using custom ion tags is used in their guide as well as a pluralsight tutorial I found on ionic.
So what's going on here? If both approaches accomplish the same thing, which one is considered best practice?
Ionic Framework, as stated in their site, is:
Ionic is both a CSS framework and a Javascript UI library. Many
components need Javascript in order to produce magic, though often
components can easily be used without coding through framework
extensions such as our AngularIonic extensions.
Using CSS Components you're simply applying CSS styling to your HTML page.
When using the Ionic directives you're using a fully-featured JavaScript component and you have access to the APIs provided by the framework.
To better understand the difference you should dig into AngularJs directives.
Take the list for example. You could create a simple list using an HTML ul li:
<ul class="list">
<li class="item">
...
</li>
</ul>
but if you use the directive:
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
you have access to the extended features provided by the framework (see the API at the bottom of the page).
I tend to use directives most of the times unless I know I don't want any kind of interaction with the interface.

encoding problems on site.master page (asp.net mvc2) on production server (2003 with IIS 6)

I have a site that uses the Hebrew language.
All the pages looks great, expect from the text that is generated in site.master.
This text comes a gibberish.
This is from master page:
<ul id="menu">
<li>
<%: Html.ActionLink("לקוחות", "List", "Customers")%></li>
same code from any other page shows hebrew chars.
The result is either gibberish, or encoded gibberish:
<div id="title">
<h1>
îòøëú ðéäåì ùéáåõ èëðàéí</h1>
</div>
<div id="menucontainer">
<ul id="menu">
<li>
ì÷åçåú</li>
tried to switch encoding in the browser but nothing gets me back to Hebrew.
This happens ONLY on production server, on my Dev machine (win7) it works fine.
The views inside the master pages shows OK also on production.
Any ideas ?
My advice would be: ditch the IIS 6 and use IIS Express, which you can install on most old OS's. It does introduce another technology into the question but this technology is newer, easy to use, maintain and script and more suitable for this new range of web development technologies like MVC, etc.
So, if you have an option to select what you use and can make decisions about it, definitely go for it.
Alternatively, you can play around with server regional settings and stuff like that but you might end up losing lots of hours to this.