Make multiple hover and click scalable - html

Question

This works correctly for hover, but I am after two other things:
1) a more scalable, generalized solution: every time I add a link and paired paragraph I don't want to have to also include specific CSS for each addition. It seems like I should be able to create the same behavior for each paired link and paragraph generally and apply it to all of the pairs. What I have seems very inefficient.
2) I'd like to also create the same behavior as the hover, but for a click and make it scalable and generalized (as #1 above). The desired behavior is click on link -> paired paragraph appears, click on link again -> paired paragraph disappears again (or something very similar).
Note: I want both click and hover because hover will work for a desktop, but not mobiles. If someone is on a smart phone they can use the click. I'd like solutions to be responsive, to avoid jQuery, and to use CSS only if possible.
Here is what I have now (using only two pairs links and paragraphs, for simplicity):
Markup:
<a id="a-1">link1</a>
<p id="p-1">para1</p>
<a id="a-2">link2</a>
<p id="p-2">para2</p>
CSS:
#a-1,#a-2{
display: block;
}
#p-1,#p-2{
display: none;
}
#a-1:hover ~ #p-1 ,#a-2:hover ~ #p-2{
display: block;
}
Here is a demo: http://jsfiddle.net/CzpZ6/

Answer 1

You can use :target attribute, in conjunction with specific IDs (see demo)
HTML
<a class="focus" href="#p1">
Click me or hover me
</a>
<p id="p1">I'm hidden</p>
<a class="focus" href="#p2">
Click me or hover me
</a>
<p id="p2">I'm another hidden paragraph</p>
CSS
.focus {
display: block;
}
.focus:focus, .focus:hover {
background-color: pink;
}
.focus + p {
display: none;
}
.focus:hover + p, p:target {
display: block;
}

Answer 2

Here is your generalized solution:
http://jsfiddle.net/8vA32/
a{
display: block;
}
p{
display: none;
}
a:hover + p {
display: block;
}
If you use plus that will select all the p values until it finds another element. So in this case + can work.
For mobile part you can use this:
/* #### Desktops #### */
#media screen and (min-width: 1024px){
/* some CSS here */
a{
display: block;
}
p{
display: none;
}
a:hover + p {
display: block;
}
}
#media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
a{
display: block;
}
p{
display: none;
}
a:active + p {
display: block;
}
}
On desktop part it will trigger hover, on mobile part it will trigger click.
Example:
http://jsfiddle.net/8vA32/

Answer 3

I believe a jQuery solution is your ONLY solution. For both hover and touch events to work you will need to turn off click and bind touch. here is a piece of script I use in a Nav menu for tablet size when users may be using either touch or mouse. Perhaps if you know js you can modify this script to fit your need:
function medMenu() {
//reset the menu in case it's being resized from a small screen
// unbind click events
jQuery('.menuToggle a').off('click');
jQuery('.topMenu h3').off('click');
// remove any expanded menus
jQuery('.expand').removeClass('expand');
// remove the span tags inside the menu
jQuery('.topMenu h3').find('span.indicator').remove();
// remove the "menu" element
jQuery('.menuToggle').remove();
//check to see if the device supports touch
//we'll use touch events instead of click as it will allow us
//to support both a CSS-driven hover and touch enabled
//menu for this screen range
if ('ontouchstart' in document.documentElement)
{
//find all 'hover' class and strip them
jQuery('.topMenu').find('li.hover').removeClass('hover');
//add touch events to submenu headings
jQuery(".topMenu h3").bind('touchstart', function(e){
//find the current submenu
var currentItem = $(this).siblings('.submenu');
//remove the expand class from other submenus to close any currently open submenus
jQuery('ul.submenu').not(currentItem).removeClass('expand');
//open the selected submenu
$(this).siblings('.submenu').toggleClass('expand');
});
//close submenus if users click outside the menu
jQuery('html').bind('touchstart', function(e) {
jQuery('.topMenu').find('ul.submenu').removeClass('expand');
});
//stop clicks on the menu from bubbling up
jQuery('#mainNav').bind('touchstart', function(e){
e.stopPropagation();
});
}
//indicate current window state
windowState = 'medium';
}

Answer 4

Change out the id tag for a generic class
JSfiddle Demo
HTML
<a class="a1">link1</a>
<p>para1</p>
<a class="a1">link1</a>
<p>para2</p>
CSS
.a1 {
display: block;
}
p {
display: none;
}
.a1:hover + p, /* the first p after an .a1 anchor */
.a1:focus + p {
display: block;
}