configuration of Extra Allowed Content of ckeditor is difficult

[adrianmak]

I allow user to add data-toggle attribute for anchor tag for toggle a block of content

I added following rule in Extra Allowed Content

a[data-*]

When user a this attribute in an anchor tag, then saving pages, pw will strip off that attribute

<a href="#content1" data-toggle="collapse">Toggle content block</a>
<div id="content1" class="collapse">
 hidden content block
</div>

[pwired]

Why do you want to do this ? Inline css lowers the security and breaks the consistency of the website.
In CKEditor you should not go any further as allowing html tags but keep the css inside your templates folder.
Anyway:

Admin => Setup => Fields => Your field => Input

scroll down to Format Tags and add div to it:
div;p;h2;h 3;h4;h5;h6;pre;address

scroll down to Extra Allowed Content and add wildcards for the <a> and <div> tag:
a[*]{*}(*)
div[*]{*}(*)

Now your <a> and <div> tags won't be stripped off anymore.

The CKEditor forced <p> tags are still wrapped around your html tags, this is how you can get rid of them:

(body field example)

Open config-body.js in your Editor (site\modules\InputfieldCKEditor\config-body.js)
and make it look like this, to prevent the forced <p> tags:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.uiColor = '#AADC6E';
config.enterMode = 2;
config.shiftenterMode = 1;
};

Now you have your html tags free from wrapped <p> tags.