data-accordion removed in Visual Editor

Using Foundation 5’s accordion, and the data-accordion html data attribute in:

<dl class="accordion" data-accordion>

gets removed when a user only edits a page with the Visual Editor.

Does anyone know of a way to keep this from happening?

I noticed this link that allows you to Register Additional HTML Attributes for TinyMCE and WP KSES, though I’m not sure where I’d place data-accordion in that code.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is an example of How to Update kses and TinyMCE to allow select data-* attributes in WordPress. Reference

add_action( 'after_setup_theme', 'x_kses_allow_data_attributes_on_links' );
function x_kses_allow_data_attributes_on_links() {
  global $allowedposttags;

    $tags = array( 'a' );
    $new_attributes = array(
        'data-foo' => array(),
        'data-bar' => array(),
    );

    foreach ( $tags as $tag ) {
        if ( isset( $allowedposttags[ $tag ] ) && is_array( $allowedposttags[ $tag ] ) )
            $allowedposttags[ $tag ] = array_merge( $allowedposttags[ $tag ], $new_attributes );
    }
}

add_filter( 'tiny_mce_before_init', 'x_tinymce_allow_data_attributes_on_links' );
function x_tinymce_allow_data_attributes_on_links( $options ) { 
    if ( ! isset( $options['extended_valid_elements'] ) ) 
        $options['extended_valid_elements'] = ''; 

    $options['extended_valid_elements'] .= ',a[data-foo|data-bar|class|id|style|href]';

    return $options; 
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0