Замена кнопки jquery toggle с изображением

Question

Я хотел бы заменить кнопку переключения на изображение. Мне было интересно, есть ли способ сделать это, просто добавив фон в код. В идеале я хотел бы просто добавить что-то вроде < фона кнопки = "URL">

Вот код, я использую:

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $(this).next().toggle(); 

    }); 
}); 
</script> 

<button>Basic</button> 
<div class="basic1" style="display:none;"> 
<p>SAMPLE TEXT....</p> 
</div> 

<button>Advanced</button> 
<div class="basic1" style="display:none;"> 
<p>SAMPLE TEXT....</p> 
</div> 

Answer 1

Это будет делать это:

jsFiddle Demo

Ключевыми задачами являются следующие:

1. Использование di v вместо <button>

2. Используйте background:url(), чтобы добавить фоновое изображение. Убедитесь, что DIV достаточно (высота/ширина) большой, чтобы содержать изображение или изображение не будет отображаться

3. Используйте JQuery, чтобы сделать кнопку мыши

HTML:

<div id="btnBasic">Basic</div> 
<div class="basic1" style="display:none;"> 
    <p>SAMPLE TEXT....</p> 
</div> 

<div id="btnAdv">Advanced</div> 
<div class="basic1" style="display:none;"> 
    <p>SAMPLE TEXT....</p> 
</div> 

JS/JQuery:

$("div[id^='btn']").click(function(){ 
    $(this).next().toggle(); 
}); 

CSS:

#btnBasic{height:42px;width:150px;background:url(http://placekitten.com/g/148/40) no-repeat;color:yellow;font-weight:bold;padding:5px 30px;} 
#btnAdv{height:42px;width:150px;background:url(http://placekitten.com/g/146/38) no-repeat;color:yellow;font-weight:bold;padding:5px 30px;} 
div[id^='btn']:hover{cursor:pointer;}