Strange Cursor/Mouse Pointer

it won’t underline (that’s by design) but the title should have a cursor if you’re using the built-in CSS. If not, or if your theme overrides it (I can’t check because you didn’t provide a link) then you can add your own CSS into the theme’s stylesheet to have it look however you’d like.

In my theme, when I’m over a title, I see an I-beam text-selection cursor, not a link/hand (https://www.xeroshoes.com/xero_dev/faq)

In a similar vein, is there any way to add some visual indication (e.g. a + sign) that the topics will expand when you click them (e.g. similar to https://www.xeroshoes.com/faq)?

Thanks!

@sashen – Yes, that’s what I meant. I get an I-beam text selection cursor too. It’s not standard, so confuses visitors. The same regarding the fact that the FAQ you mouse over won’t underline (by design). That’s not standard either and an underline when mousing over an FAQ would be better design and better appreciated.

Kindest regards,
Jae ??

@sashen and @jae – the reason that the cursor isn’t a pointer by default is that the FAQ titles are not links in the traditional sense, but standard H tags with the expand / collapse controlled via jQuery.

however, the CSS I have included in the plugin does make the cursor into a pointer. that may not be a good solution if the other CSS conflicts with your theme.

You can manually add the below CSS into your own theme to get the pointer cursor:

#faq-block .single-faq .expand-title {
	cursor:pointer;
}

Thanks for that. I understand what you’re saying. Whilst it’s not a link in the traditional sense, an I-beam cursor is still very confusing. Either a hand cursor or an arrow would be more pleasing to the eye.

As a suggestion, perhaps you could add some kind of an option in the settings to give everyone a choice as to what cursors they see?

Also, it would be great if we could have some kind of + sign or arrow bullet or symbol @ the front of each FAQ line to indicate to the user that they need to click on it to expand it.

Please check this link – https://sagewestassociates.com/coaching/faq

This is the effect I want to achieve. Only thing is, the plug-in I used for this is way too complicated to use and requires coding knowledge. This is O.K. for me. But for my clients, it’s not. The thing that I liked about your plug-in, is that it just uses a simple shortcode and no knowlege of coding, which is great for when I hand a website back over to a client.

You will notice on the page of the above link that there’s a down arrow @ the front of each FAQ, which changes to an up arrow when each respective FAQ is expanded.

The other great thing about your plug-in is that the text answer for each FAQ is justified/indented inline with its respective question. The plug-in I’ve used on the above page does not do that very well, which is why I decided to switch to yours.

@jae as I explained, if you load the CSS provided in the plugin as an option, the cursor WILL be a hand. Without that, I cannot control what your theme does. at this point, adding more CSS to handle just the cursor (which is the only way to control it) would defeat the purpose. You can literally copy + paste the CSS I provided above into your theme’s style.css file and achieve the same result.

My goal with the plugin is to provide a small amount of CSS, but leave the general style / appearance to the theme itself, so that the appearance of the FAQs match the look / feel of the rest of the site.

Hi,

A bit to late. but I tried to modify the plugin a bit to add this functionality. There might be a better way or you may be able to improve this code.

Add the below css to your stylesheet

.collapseomatic {
display: block;
width:95%;
}

.expand-title{
background-image:url(/wp-content/uploads/2013/04/down-arrow.png);
background-repeat: no-repeat;
padding-left: 30px;
height:24px;
}

.collapse-title{
background-image:url(/wp-content/uploads/2013/04/up-arrow.png);
background-repeat: no-repeat;
padding-left: 30px;
height:24px;
}

Now in the plugin folder, edit the faq.init.js file and replace the boom_goes_the_dynamite() function

function boom_goes_the_dynamite() {

		var speed_v = jQuery('div.faq-list').data('speed');
		speed		= (speed_v)		? speed_v		: 200;

		jQuery('div.expand-faq').each(function() {
			jQuery(this).find('div.faq-answer').hide();
		});

		jQuery('.expand-title').click(function (event) {
                var faq = jQuery(this).attr('id');
                var h4WithClass = jQuery(this).attr('id');
		jQuery('div.expand-faq').each(function() {
			var current =  jQuery(this).attr('id')  ;
			if (current!= h4WithClass)
			{
			jQuery(this).find('#'+current).removeClass('collapse-title');
			jQuery(this).find('div.faq-answer').hide();
			}
		});
                jQuery(this).toggleClass("collapse-title");
			jQuery('div.faq-list').find('div.faq-answer[rel="' + faq + '"]').slideToggle(speed);
			jQuery('div.faq-list').find('div.faq-answer').not('[rel="' + faq + '"]').hide(speed);
		});

	}