WordPress.org

1. Jae
   Member
   Posted 6 months ago #
   

   Great plugin. Just one complaint - When you move your mouse over an FAQ, it doesn't give any indication to the user that it's clickable. The mouse pointer changes to 'I' shaped pointer, instead of the usual pointing hand shape that you would normally get when mousing over a link. It would also be great if the FAQ underlines when you mouse over it.

   I would be very grateful if this could be resolved as a matter of urgency, as I need this plug-in (or one like it) for two of my clients' websites.

   I would imagine that changing this one feature would make it more usable for others too, so you'd likely get more downloads. ;)

   http://wordpress.org/extend/plugins/wordpress-faq-manager/

2. Norcross
   Member
   Plugin Author
   Posted 6 months ago #
   

   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.

3. sashen
   Member
   Posted 6 months ago #
   

   In my theme, when I'm over a title, I see an I-beam text-selection cursor, not a link/hand (http://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 http://www.xeroshoes.com/faq)?

   Thanks!

4. Jae
   Member
   Posted 6 months ago #
   

   @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 :)

5. Norcross
   Member
   Plugin Author
   Posted 5 months ago #
   

   @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;
   }

6. Jae
   Member
   Posted 5 months ago #
   

   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.

7. Jae
   Member
   Posted 5 months ago #
   

   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.

8. Norcross
   Member
   Plugin Author
   Posted 5 months ago #
   

   @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.

9. mev9669
   Member
   Posted 3 weeks ago #
   

   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);
   		});
   
   	}

Reply

You must log in to post.