toggleClass support for faq title anchor

  • Resolved pcarguy22

    (@pcarguy22)


    11 years, 3 months ago

    I added the code below to q-a-focus-plus.min.js

    $( ".qafp-faq-anchor" ).click(function() {
$( this).find( ".fa-caret-right" ).toggleClass( "open", 1000 );
return false;
});

    I also added this icon code to the shortcodes file:

    <i class="fa fa-caret-right"></i>

    Then I am using CSS to replace the icon with a down icon when the “open” class is toggled after clicking on the .qafp-faq-anchor link.

    This works great and provides a good visual affordance for usability; however, I cannot figure out how to toggle the open class in conjunction with the accordion activated, meaning that the down facing icon that the open class triggers, stays visible when the accordion hides the answer div.

    I understand that the answer is toggled through jquery, which switches out display none for display block on the answer div, but what would be great is if the qafp-faq class had an active or current class tied to it when the div is toggled.

    That way we could use CSS to target the active div.

    Since I am unsure of how to apply that active class or current class to the visible qafp-faq div, I’ve been trying to bind this behavior:

    $( ".qafp-faq-anchor" ).click(function() {
$( this).find( ".fa-caret-right" ).toggleClass( "open", 1000 );
return false;
});

    to the accordion functionality.

    I would greatly appreciate either being able to add an active or current class to the visible answer, or having the click function I pasted above work when the accordion collapses open divs.

    Thank you. Beautiful plugin.

    I’ve spent hours trying to figure this out. Hair falling out.

    https://www.ads-software.com/plugins/q-and-a-focus-plus-faq/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter pcarguy22

    (@pcarguy22)

    I created a fiddle showing the exact problem.

    Plugin Author ELsMystERy

    (@elsmystery)

    I like this idea and appreciate the input from both of you. It never even crossed my mind. It will be a little more complex to do for a release, but I will implement this type of functionality in the next major update.

    Thread Starter pcarguy22

    (@pcarguy22)

    Thank you! Again, a beautiful plugin.

    Good news…

    Posted on Stack Overflow and got a solution – > here.

    Here is the code that works:

    $(".qafp-faq-anchor").click(function () {
    // Remove open class if this is open
    if($(this).find('.fa-caret-right').hasClass('open')) {
        $(this).find('.fa-caret-right').removeClass('open');
    }
    else {
        // Removes open class no matter where it is
        $('.open').removeClass( "open", 1000 );
        // Adds open class to clicked element
        $(this).find(".fa-caret-right").addClass("open", 1000);
        return false;
    }
});

    You can see a working fiddle – > here.

    I think it’s a nice addition… : )

    Thread Starter pcarguy22

    (@pcarguy22)

    Is it possible to use a shortcode to show a single FAQ with collapsible false?

    Thread Starter pcarguy22

    (@pcarguy22)

    I figured out another solution:

    Wrap the shortcode in a div with the class sc_slidecontent and target the collapsed state like this:

    .sc_slidecontent .qafp-faq-answer {
    display: block !important;
}

    I also did

    .sc_slidecontent .qafp-faq-title {
    display: none !important;
}

    Then manually added <h1>Title</h1>

    before placing

    <?php echo do_shortcode("[qafp id=123]"); ?>

    in my theme. A neat way to use this as a way to include content in theme files without running a loop.

    Plugin Author ELsMystERy

    (@elsmystery)

    I am getting closer to adding this feature. I have a lot to do right now, so I have not had the time to get to it. Once I get the other priorities out of the way I will do it. I hope to have the update out before December 21st.

    Adding a collapsible option to the shortcode may be more than I will be able to do before the 1st of the year, but I will look into it when I add the new features.

    Plugin Author ELsMystERy

    (@elsmystery)

    OK.. I have the open/closed part working on the test site. I just need to make icons for the dark and light themes and then test it on different PC and mobile browsers. I have company arriving tomorrow for the holidays. I will try to work on it while they are here (when I can), but if I can’t get it done before the 1st, I will definitely get it done in January. Sorry it is taking so long. Been busy with other things. I will be sure to credit you in the release notes. I will look into the shortcode option once I have the other updates completed.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘toggleClass support for faq title anchor’ is closed to new replies.