Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1085461

    Hi, I’ve been using the accordion for a side panel on my new sites portfolio pages. I’ve managed to customise quite a bit with a bit of css content and some shortcodes.which I’m pretty happy with.

    accordion

    One thing I was wondering was the toggle icons themselves, is it possible to have a selected state too rather than just the hover state? So say they would be blue when selected?

    I have tried with ::selected on a few elements but haven’t managed to get it to work.

    Current code I have for the toggles is as..

    .custom-accordion .toggle_icon:before {
    	font-family: 'dig_icons';   
    	content:'\e815';    
    	position: absolute;
    	font-size: 12px;
    	top:50%;
    	transform: translateY(-50%);
    	left: 0px;
    	line-height: 0;
    	color:rgba(255, 255, 255, 0.2);
    }
    
    /* Active tab icon */
    .custom-accordion .activeTitle .toggle_icon:before {
    	font-family: 'dig_icons';        
    	content:'\e814';
    }
    
    /* Tab icon on hover */
    .custom-accordion .toggler:hover .toggle_icon:before {
    	color:rgba(255, 255, 255, 1);
    }

    Any help greatly appreciated!

    • This topic was modified 4 years, 12 months ago by Digilocker.
    #1085470

    managed to fix the above with using the activetitle, sorry missed that…

    /* Active tab icon */
    .custom-accordion .activeTitle .toggle_icon:before {
    	font-family: 'dig_icons';        
    	content:'\e814';
    	color:white!important;
    }

    However, I have a new issue, the toggle titles have an overlay effect, (which I think is part of the enfold theme, as I dont think I have styled this in my child themes css).

    Is there anyway to override the visited selector of this, because the white hover effect disapears once the toggle has been opened and it feels a little broken that way?

    accordion toggle visited

    #1085481

    Sorry fixed the issue, there was still a custom color being applied to the element which must have been over-riding the css when the toggle had been visited.

    #1085894

    Hi Digilocker,

    Glad you got it working for you!

    Best regards,
    Victoria

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.