JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" name="searchFormToggle" id="searchFormToggle" value="toggle from outside"/>

<div id="lapin">
    <fieldset id="searchForm" tabindex="1" data-toggle="autofocus" data-target="#searchField">
        <input type="button" name="searchToggle" id="searchToggle" value="toggle with bubbling"/>
        <input type="search" name="searchField" id="searchField" placeholder="searchfield placeholder" />
        <span>toggle with bubbling</span>
    </fieldset>
    <img src="http://svg.swotee.com/de/458955.svgz" />
</div>

<div id="canard">
    <img src="http://svg.swotee.com/de/438355.svgz" />
</div>

CSS

#searchField{
    width:0;
}
#searchField:focus {
    width:auto;
}

JavaScript

$('[data-toggle*="autofocus"]')
    .on('focusin', function(e){
        $that = $(this);
        $($that.data('target'), $that).focus();
        //do something else
        $('#lapin img').css({background:'#456'});
        $('#canard img').css({background:'#645'});
    })
    .on('focusout', function(e){
        //do something else
        $('#lapin img').css({background:'none'});
        $('#canard img').css({background:'none'});
    });

$('#searchFormToggle')
    .on('focus', function(e){
        // will only work with a focusable elt => add tabindex to elt if not an input or link
        $('#searchForm').focus();
    });